上一章講的是其餘一些經常使用的小插件,這一章講的是自定義插件。webpack
$ mkdir 0x0016-other-plugin $ cd 0x0016-other-plugin $ npm init -y $ vim webpack.config.js // ./webpack.config.js const path = require('path'); module.exports = { entry : { 'index': ['./src/index.js'], }, output: { path : path.join(__dirname, 'dist'), filename: '[name].[chunkhash].js' } ;
編寫插件,這個插件會子安控制檯輸出一句hello plugin
web
// ./CustomPlugin.js function UpdatePackageVersionPlugin(options) { console.log('hello plugin') } CustomPlugin.prototype.apply = function (compiler) { }; module.exports = CustomPlugin;
引用該插件npm
const path = require('path'); var CustomPlugin = require('./CustomPlugin') module.exports = { entry : { 'index': ['./src/index.js'], }, output: { path : path.join(__dirname, 'dist'), filename: '[name].bundle.js' }, plugins: [ new CustomPlugin({options:true}) ] };
打包並查看控制檯vim
$ webpack # ↓↓↓↓↓↓↓↓↓↓↓插件輸出 hello plugin # ↑↑↑↑↑↑↑↑↑↑↑插件輸出 The compiler is starting to compile... The compiler is starting a new compilation... The compilation is starting to optimize files... The compilation is going to emit files... Hash: 8daa4edb5544a8f81c35 Version: webpack 3.8.1 Time: 58ms Asset Size Chunks Chunk Names index.bundle.js 2.6 kB 0 [emitted] index [0] multi ./src/index.js 28 bytes {0} [built] [2] ./src/index.js 14 bytes {0} [built]
修改插件,這個插件會讀取打包好的資源文件,並寫入到filelist.md
文件,保存到dist
目錄下。segmentfault
function CustomPlugin(options) { console.log('hello plugin') } CustomPlugin.prototype.apply = function (compiler) { compiler.plugin('emit', function (compilation, callback) { // Create a header string for the generated file: var filelist = 'In this build:\n\n'; // Loop through all compiled assets, // adding a new line item for each filename. for (var filename in compilation.assets) { filelist += ('- '+ filename +'\n'); } // Insert this list into the webpack build as a new file asset: compilation.assets['filelist.md'] = { source: function() { return filelist; }, size: function() { return filelist.length; } }; callback(); }) }; module.exports = CustomPlugin;
打包並查看文件app
$ webpack $ ls ./dist filelist.md index.bundle.js $ cat filelist.md // ./filelist.md In this build: - index.bundle.js
3. 更多配置請查閱[webpack關於自定義plugin章節][3] ### 0x005 資源 - [源代碼][4] [1]: https://segmentfault.com/a/1190000011976221 [2]: https://segmentfault.com/a/1190000011976221 [3]: https://webpack.js.org/contribute/writing-a-plugin/