Loader和插件的编写

发表于 | 分类于

webpack loader 和插件编写。

Loader

loader 本身是一个函数，接受源文件作为参数，返回转换的结果。

执行顺序

loader 的执行顺序为从右向左。

1
2
3

// webpack 采用的执行顺序(函数组合情况)
compose = (f, g) => (...args) => f(g(...args))

loader-runner

定义： 允许在不安装 webpack-cli 的前提下运行 loader

作用：

  1. 提供独立的运行环境
  2. 作为 webpack 的依赖，在 webpack 中使用它执行 loader；
  3. 进行 loader 的开发和调试。
  4. github 地址

编写一个调试实例（处理 es6 安全性问题）

编码为 2028 的字符为行分隔符，会被浏览器理解为换行，而在 Javascript 的字符串表达式中是不允许换行的，从而导致错误。2029 为段分隔号，同 2028

  • 目录结构
1
2
3
4
5
6
7
-- pageage.json
-- src
	-- demo.txt
	-- raw-loader.js
-- run-loader.js

$ npm i loader-runner -S
  • src/demo.txt
1
asd
  • src/raw-loader.js
1
2
3
4
5
6
7
module.exports = function(source) {
  const json = JSON.stringify(source)
    .replace(/\u2028/g, '\\u2028')
    .replace(/\u2029/g, '\\u2029')

  rerurn `export defalut ${json}`
}
  • run-loader.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 核心函数runLoaders

const path = require('path')
const fs = require('fs')
const { runLoaders } = require('loader-runner')

runLoaders({
  resource: path.join(__dirname, './src/demo.txt'), // 资源绝对路径
  loaders: [
    path.join(__dirname, './src/raw-loader.js')
  ],
  context: { // 额外上下文
    minimize: true, // 压缩参数
  },
  readResource: fs.readFile.bind(fs)

}, (err, result) => {
  err ? console.error(err) : console.log(result)
})


// 打印结果

{ result: [ 'export defalut ""' ],
  resourceBuffer: <Buffer >,
  cacheable: true,
  fileDependencies:
   [ '/Users/wangguanwei/Desktop/test/webpack/raw-loader/src/demo.txt' ],
  contextDependencies: [],
  missingDependencies: [] }

编写一个构建资源为 zip 包的插件

代码仓库地址