Webpack 自定义loader和plugins

Webpack

参考文章：

http://www.css88.com/doc/webpack/development/how-to-write-a-plugin/

1. 调试

a) 新建配置项，通过require方式引入

var path = require('path');
var webpack = require('webpack');
var MyExampleWebpackPlugin = require('./wxplugin/index');
var config = {
    devtool: "source-map",
    entry: {
        'redpacket': './application/pages/activity180420/redPacket.js'
    },
    output: {
        path: path.resolve(__dirname, 'webapp/script'),
        filename: '[name].js'
    },
    module: {
        rules: [{
            test: /\.js/,
            use: [{
                    loader: 'babel-loader',
                    query: {
                        presets: ['es2015', 'stage-0']
                    }
                }, 
                path.resolve('./wxloader/wxjs.js')
            ]
        }]
    },
    plugins: [
        new MyExampleWebpackPlugin()
    ]
};
module.exports = config;

b) 安装node-nightly

c) 新建npm script

  "scripts": {
    "debug": "node-nightly --inspect-brk ./node_modules/webpack/bin/webpack.js"
  },

d) 新建vscode调试项，采用npm run script方式启动

{
    "type": "node",
    "request": "launch",
    "name": "Launch via NPM",
    "runtimeExecutable": "npm",
    "runtimeArgs": [
        "run-script",
        "debug"
    ],
    "port": 9229
}

2. 插件

插件是webpack的核心功能，需要理解一些 webpack 底层的内部特性来做相应的勾子。

a) Demo

function HelloWorldPlugin(options) {
  // 使用配置（options）设置插件实例
}
HelloWorldPlugin.prototype.apply = function(compiler) {
  compiler.plugin('done', function() {
    console.log('Hello World!');
  });
};
module.exports = HelloWorldPlugin;

b) 编译器(Compiler)和编译(Compilation)

c) Hooks

watch执行顺序