详解webpack loader和plugin编写(3)

compiler.plugin('emit',function(compilation, callback) { ... // 处理完毕后执行 callback 以通知 Webpack // 如果不执行 callback，运行流程将会一直卡在这不往下执行 callback(); });

关于complier和compilation，webpack定义了大量的钩子事件。开发者可以根据自己的需要在任何地方进行自定义处理。

《compiler钩子文档》

《compilation钩子文档》

3.5 手写一个plugin

场景：

小程序mpvue项目，通过webpack编译，生成子包（我们作为分包引入到主程序中），然后考入主包当中。生成子包后，里面的公共静态资源wxss引用地址需要加入分包的前缀：/subPages/enjoy_given。

在未编写插件前，生成的资源是这样的，这个路径如果作为分包引入主包，是没法正常访问资源的。

所以需求来了：

修改dist/static/css/pages目录下，所有页面的样式文件(wxss文件)引入公共资源的路径。

因为所有页面的样式都会引用通用样式vender.wxss

那么就需要把@import "/static/css/vendor.wxss"; 改为：@import "/subPages/enjoy_given/static/css/vendor.wxss";复制代码

OK 开始！

1）创建插件文件 CssPathTransfor.js

CssPathTransfor.js

class CssPathTransfor { apply (compiler) { compiler.plugin('emit', (compilation, callback) => { console.log('--CssPathTransfor emit') // 遍历所有资源文件 for (var filePathName in compilation.assets) { // 查看对应的文件是否符合指定目录下的文件 if (/static\/css\/pages/i.test(filePathName)) { // 引入路径正则 const reg = /\/static\/css\/vendor\.wxss/i // 需要替换的最终字符串 const finalStr = '/subPages/enjoy_given/static/css/vendor.wxss' // 获取文件内容 let content = compilation.assets[filePathName].source() || '' content = content.replace(reg, finalStr) // 重写指定输出模块内容 compilation.assets[filePathName] = { source () { return content; }, size () { return content.length; } } } } callback() }) } } module.exports = CssPathTransfor

看着挺多，实际就是遍历compilation.assets模块。对符合要求的文件进行正则替换。

2）修改webpack配置

var baseWebpackConfig = require('./webpack.base.conf') var CssPathTransfor = require('../plugins/CssPathTransfor.js') var webpackConfig = merge(baseWebpackConfig, { module: {...}, devtool: config.build.productionSourceMap ? '#source-map' : false, output: {...}, plugins: [ ..., // 配置插件 new CssPathTransfor(), ] })

插件编写完成后，执行编译命令