WebPack 插件
WebPack
是 webpack 的。webpack 自身也是构建于,你在 webpack 配置中用到的相同的系统之上!
目的在于 loader 无法实现的其他事。
剖析
webpack 是具有 的 JavaScript 对象。apply 会被 webpack compiler ,并且 compiler 对象可在整个编译生命周期访问。
ConsolenBuildWebpackPlugin.js
const pluginName = 'ConsolenBuildWebpackPlugin'; class ConsolenBuildWebpackPlugin { apply(compiler) { compiler.hooks.run.tap(pluginName, compilation => { console.log("webpack 构建过程开始!"); }); } }
compiler hook 的 tap 的第参数,应该是驼峰式命名的。建议为此使用常量,以便它可以在所有 hook 中复用。
由于可以携带参数/选项,你必须在 webpack 配置中,向 plugins 传入 new 实例。
根据你的 webpack ,这里有多种方式使用。
配置
webpack.con.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装 const webpack = require('webpack'); //访问内置的 const path = require('path'); const con = { entry: './path/to/my/entry/file.js', output: { filename: 'my-first-webpack.bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.(js|jsx)$/, use: 'babel-loader' } ] }, plugins: [ new webpack.optimize.UglifyJsPlugin(), new HtmlWebpackPlugin({template: './src/index.html'}) ] }; module.exports = con;
Node API
即便使用 Node API,也应该在配置中传入 plugins 。compiler.apply 并不是推荐的使用方式。
some-node-script.js
const webpack = require('webpack'); //访问 webpack 运行时(runtime) const conuration = require('./webpack.con.js'); let compiler = webpack(conuration); compiler.apply(new webpack.ProgressPlugin()); compiler.run(function(err, stats) { // ... });
你知道吗:以上看到的示例和 极其类似。中隐藏有大量使用示例,你可以用在自己的配置和脚本中。