webpack系列 — 加载器
|最后更新: 2025-7-27
type
Post
status
Draft
date
Jul 12, 2025
slug
webpack-loaders
summary
tags
webpack
webpack loader
category
webpack
icon
password
loader主要用来对源文件进行转换，变成webpack能处理的js模块。他本质上就是一个函数，入参是文件内容，出参是转换后的结果。先看一个最简单的例子。
假如我们项目里有一些txt文件，他们有固定的格式，例如：
name gender message
alice female hello
bob male hi
第一行是标题，以后每一行是数据，数据间用空格分隔。现在我们需要写一个loader实现直接将这个种格式的txt转换为如下的js代码。
那么我们的loader可以这么写
然后我们就可以在代码中直接 import data from ‘./text’; 了。
 
以上只是一个很简单的场景，实际上为了增强loader的能力，webpack给loader暴露了很多额外的能力
  1. 加载raw文件 我们需要load的并不总是文本类型的文件，有时我们需要load一些二进制的文件，比如图片，音频等。此时我们只需要指定loader函数的raw属性为true即可，webpack便知道需要以二进制的形式加载文件并传给我们的loader
  1. loader context
webpack提供了很多的api给loader，这些api否挂在 this 下面。
this.resource 当前文件的完整路径，包括resourceQuery
 
 
Loading...