插件是用来拓展webpack功能的。

1、比如BannerPlugin

通过这个插件，打包后的JS文件都显示如下：

2、再比如HtmlWebpackPlugin，会依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的index.html，这在每次生成的JS文件名称不同时非常有用。（就不用手动修改引用路径了）类似于一个模板引擎插件。

3、cleanWebPackPlugin会自动删除上次的打包文件。（不然每次打包出的文件名不一样，所以dist下的文件会越来越多）

4、Hot Module Reqplacement（HMR）也是webpack里很有用的一个插件，它允许你在修改组件代码后，自动刷新实时预览修改后的效果。

在webpack中实现HMR也很简单，只需要做两项配置

  • 在webpack配置文件中添加HMR插件；
  • 在Webpack Dev Server中添加“hot”参数；

5、此外还有一些压缩JS代码(UglifyJsPlugin)、分离CSS和JS文件(ExtractTextPlugin)内置的优化类插件。

1
2
3
4
5
6
7
8
9
plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin("style.css")
],

6、webpack-dev-server：每当修改了源代码， webpack会自动进行项目的打包和构建。

webpack-dev-server会启动一个实时打包的http服务器，main.js是在根目录的内存中，index.html直接引用main.js即可。

在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的配置。

1
2
3
4
5
6
7
8
9
10
11
/*
*webpack.config.js中的module.exporte
*/
devServer:{
        // 初次打包完成后,自动打开浏览器
        open:true,
        // 在http协议中,如果端口号是80,可以被省略(仅显示为localhost)
        port:80,
        // 指定运行的主机地址
        host:'127.0.0.1'
}

7、通过插件管理输出

（1）HtmlWebpackPlugin用于生成dist/index.html，并保证index.html正确引入打包后的js文件，使用方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
npm install --save-dev html-webpack-plugin

// webpack.config.js
const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
   entry: {
     index: './src/index.js',
     print: './src/print.js',
   },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: '管理输出',
+    }),
+  ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
};

（2）清理/dist文件夹

1
2
3
4
5
output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
+    clean: true,
},

（3）（仅做了解）webpack 通过 manifest，可以追踪所有模块到输出 bundle 之间的映射。如果你想要知道如何以其他方式来控制 webpack 输出，了解 manifest 是个好的开始。通过 webpackManifestPlugin 插件，可以将 manifest 数据提取为一个 json 文件以供使用。