webpack只能处理javascript的模块，如果要处理其他类型的文件，就需要使用loader来转换。loader是webpack中一个重要的概念，它是指用来降一段代码转换成另一端代码的webpack加载器。
首先，来新建一个项目webpack-loader，并且安装webpack,webpack-cli
// 新建webpack.config.js
let path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "build.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /\.js$/,
use: path.resolve(__dirname, 'loader', 'loader1.js') // 这里解析除了一个绝对路径“rootpath +“/loader/loader1.js””
}
]
}
};
上边代码中，对js文件，我们使用loader目录下的loader1.js来转换。接下来我们些loader1.js
现在的文件结构是这样的
image.png
正常情况下loader是一个函数，所以，我们的loader1.js大约是这样的：
//loader1.js
function loader(source) {
// 这里的参数是源码
// ...这里就进行一些代码转换
return source;
}
module.exports = loader;
运行 npx webpack
image.png
但是像
path.resolve(__dirname, 'loader', 'loader1.js')这样的写法实在不美观，我们可以再webpack.config.js中加resolveLoader字段来重命名
//webpack.config.js
resolveLoader: {
modules: ['node_modules', path.resolve(__dirname, 'loader', 'loader1.js')]
//别名
// alias: {
// loader1: path.resolve(__dirname, 'loader', 'loader1.js')
// }
},
module: {
rules: [
{
test: /\.js$/,
use: 'loader1'
}
]
}
以上，alias和modules都可以实现loader的查找
下边我们来说说loader的配置，先新建两个文件，loader2.js,loader3.js
//loader1.js
function loader(source) {
console.log("loader1~~~~~~");
return source;
}
module.exports = loader;
// loader2.js
function loader(source) {
console.log("loader2~~~~~~");
return source;
}
module.exports = loader;
//loader3.js
function loader(source) {
console.log("loader3~~~~~~");
return source;
}
module.exports = loader;
// webpack.config.js
module.exports = {
...
module: {
rules: [
{
test: /\.js$/,
use: "loader1"
},
{
test: /\.js$/,
use: "loader2"
},
{
test: /\.js$/,
use: "loader3"
}
]
}
...
}
执行
image.png
如图，之前的博客有提过，loader的执行顺序是从下往上，从右往左的。但如果需要指定顺序的话，笨办法就是按照loader的加载顺序来写，或者配置*enforce*来实现
module: {
rules: [
{
test: /\.js$/,
use: "loader1",
enforce: "pre"
},
{
test: /\.js$/,
use: "loader2"
},
{
test: /\.js$/,
use: "loader3",
enforce: "post"
}
]
}
现在运行
image.png
可以看到“pre”会将loader置前，“post”将loader置后。normal介于两者之间。那么inline类型的loader呢？我们来试一下：
// 新建a.js
module.exports = "lcccc";
//index.js中引入，并且传入inline-loader
console.log("loader");
let str = require('inline-loader!./a.js');
//新建inline-loader.js文件
function loader(source) {
console.log("inline-loader~~~~~~");
return source;
}
module.exports = loader;
运行
image.png
可以看到，执行优先级是这样
pre > normal > inline > post的但是当某个文件你想特殊处理，比如上边的a.js，就是不想让它用webpack配置的pre和normal loader，而只使用inline-loader，你可以这样：
//index.js
console.log("loader");
// “-!”,不会让文件再去通过pre+normal loader来处理了
// “!”, 不使用normal-loader
// “!!”，什么都不要，只使用这个行内loader
let str = require("-!inline-loader!./a.js");
执行：
image.png
别的情况大佬们自己试试
loader分为Pitch Loader和Normal Loader
图片转自珠峰培训
图片转自珠峰培训
如上图：
loader执行首先会加载pitch-loader（书写loader的顺序），然后加载资源resource，最后执行normal-loader（正常加载loader的顺序，右到左，下往上）
如果pitch-loader有返回值，则会跳过后面的loader，直接走到上一层的normal-loader里面。
从上图也大抵能够理解loader为什么是从下往上，从右往左执行了。至于pitch，后续博文会有详解
