1.loader简单介绍
webpack 中 loader 是用于对模块的源代码进行转换（处理）的插件。例如 webpack 中常见的loader， css-loader、babel-loader。
2.自定义 loader
关于 loader：
-
loader本质上是一个导出为函数的JavaScript模块，即函数；
-
loader runner库会调用这个函数，然后将上一个loader产生的结果或者资源文件传入进去；
-
自定义 loader函数的接收参数有content(资源文件的内容)、map(sourcemap的数据)、meta(一些元数据)；
例如自定义个 loader 并希望打包时指定类型文件能够经过自定义loader 的函数的处理：
自定义一个 hgf-loader01的 loader
const { validate } = require('schema-utils')
const schema = require('../schema/loader01-schema.json')
module.exports = function(context) {
console.log('testing hgf-custom-loader111111~~~~~~~~~~~~~~~~~~~');
// 获取传入 options
const options = this.getOptions()
validate(schema, options)
console.log('hgf-custom-Options~~~~~~~~~~~~~~~~~~', options);
return context + 'hgf-custom-loader'
}
module.exports.pitch = function() {
console.log('testing hgf-custom-loader111111-pitching~~~~~~~~~~~~~~~~~~~');
}3.关于 pitching loader
webpack 的官方文档中有对 pitching loader 的介绍，即自定义 loader 中的 pitch 属性
4.多 loader 的执行流程、顺序
例如该 webpack 中配置多个 loader进行打包：
const path = require('path')
module.exports = {
entry: './src/main.js',
mode: 'development',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test:/\.js$/i,
use: {
loader: 'hgf-loader01',
options: {
parameter1: 'hgf-loader01----parameter1',
parameter2: 2222
}
},
enforce: 'pre'
},
{
test:/\.js$/i,
use: {
loader: 'hgf-loader02'
}
},
{
test:/\.js$/i,
use: {
loader: 'hgf-loader03'
}
}
]
},
resolveLoader: {
modules: ['node_modules', './src/hgf-loader']
}
}loader 的内容
// hgf-loader01
const { validate } = require('schema-utils')
const schema = require('../schema/loader01-schema.json')
module.exports = function(context) {
console.log('testing hgf-custom-loader111111~~~~~~~~~~~~~~~~~~~');
// 获取传入 options
const options = this.getOptions()
validate(schema, options)
console.log('hgf-custom-Options~~~~~~~~~~~~~~~~~~', options);
return context + 'hgf-custom-loader'
}
module.exports.pitch = function() {
console.log('testing hgf-custom-loader111111-pitching~~~~~~~~~~~~~~~~~~~');
}
// hgf-loader02
module.exports = function(context) {
console.log('testing hgf-custom-loader222222~~~~~~~~~~~~~~~~~~~');
return context + 'hgf-custom-loader'
}
module.exports.pitch = function() {
console.log('testing hgf-custom-loader222222-pitching~~~~~~~~~~~~~~~~~~~');
}
// hgf-loader03
module.exports = function(context) {
console.log('testing hgf-custom-loader333333~~~~~~~~~~~~~~~~~~~');
return context + 'hgf-custom-loader'
}
module.exports.pitch = function() {
console.log('testing hgf-custom-loader333333-pitching~~~~~~~~~~~~~~~~~~~');
}打包运行结果：
可看到从上往下依次运行 loader 的 pitching loader，再从下往上的运行 loader，pitching loader从上往下运行，可以在 pitching 阶段，传递给 pitch 方法的 data，在执行阶段也会暴露在 this.data 之下，并且可以用于在循环时，捕获并共享前面的信息。
a.webpack 的 resolveLoader 属性
webpack 中通过配置resolveLoader属性，设置 webpack 解析文件的查找来源
b.webpage 的 enforce 属性
webpack 中 loader 的执行顺序默认是从下往上依次执行 loader 对资源文件进行处理，但是 webpack 也提供了 enforce 属性，可以指定 loader 的执行顺序
"pre": 设置第一个执行， "post"设置最后一个执行
例如将上面代码的 loader 改为如下顺序，配置 enforce 属性后，loader 的执行顺序变化
可看出默认从下往上应该为 loader03 →loader02→loader01，配置 enforce 属性后，基于属性配置值进行了 loader 执行顺序的改变。
