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~~~~~~~~~~~~~~~~~~~');// 获取传入 optionsconst 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~~~~~~~~~~~~~~~~~~~');// 获取传入 optionsconst 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-loader03module.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 执行顺序的改变。