從零開始的webpack生活-0x017:CustomPlugin自定義插件

0x001 概述

上一章講的是其餘一些經常使用的小插件,這一章講的是自定義插件。webpack

0x002 環境配置

$ 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'
    }
;

0x003 栗子1-最簡單的插件

  1. 編寫插件,這個插件會子安控制檯輸出一句hello pluginweb

    // ./CustomPlugin.js
    function UpdatePackageVersionPlugin(options) {
        console.log('hello plugin')
    }
    CustomPlugin.prototype.apply = function (compiler) {
    };
    
    module.exports = CustomPlugin;
  2. 引用該插件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})
        ]
    };
  3. 打包並查看控制檯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]

0x004 栗子2-偷偷添加資源

    1. 修改插件,這個插件會讀取打包好的資源文件,並寫入到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;
    1. 打包並查看文件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/
    相關文章
    相關標籤/搜索