webpack插件

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
https://doc.webpack-china.org/plugins/

使用插件的方法

要使用某个插件，我们需要通过npm安装它，然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例（plugins是一个数组）

1.BannerPlugin --在每个生成的 chunk 顶部添加 banner

 plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究')
    ],

2.UglifyJsPlugin--- js压缩

 plugins: [
       new webpack.optimize.UglifyJsPlugin()
    ],

3.html-webpack-plugin 简单创建 HTML 文件，用于服务器访问

new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
        })

4.HotModuleReplacementPlugin 启用模块热替换 （这个还有点问题。。。。）

它允许你在修改组件代码后，自动刷新实时预览修改后的效果。（永远不要在生产环境(production)下启用 HMR）

用法

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

   const HtmlWebpackPlugin = require('html-webpack-plugin');
   const CleanWebpackPlugin = require('clean-webpack-plugin');
  const webpack = require('webpack');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist',
+     hot: true
    },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Hot Module Replacement'
      }),
+     new webpack.HotModuleReplacementPlugin(
            options
        )
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

选项(Options)

包含如下选项：

• multiStep (boolean)：设置为 true 时，插件会分成两步构建文件。首先编译热加载 chunks，之后再编译剩余的通常的资源。
• fullBuildTimeout (number)：当 multiStep 启用时，表示两步构建之间的延时。
• requestTimeout (number)：下载 manifest 的延时（webpack 3.0.0 后的版本支持）。

通过在命令行中运行 npm start 来启动并运行 dev server

5.extract-text-webpack-plugin从 bundle 中提取文本（CSS）到单独的文件

安装

npm install --save-dev extract-text-webpack-plugin

配置

const ExtractTextPlugin = require("extract-text-webpack-plugin");

// 有多少个css文件就创建多少个实例
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
      },
      {
        test: /\.less$/i,
        use: extractLESS.extract([ 'css-loader', 'less-loader' ])
      },
    ]
  },
  plugins: [
    extractCSS,
    extractLESS
  ]
};

它会将所有的入口 chunk(entry chunks)中引用的 *.css，移动到独立分离的 CSS 文件。因此，你的样式将不再内嵌到 JS bundle 中，而是会放到一个单独的 CSS 文件（即 styles.css）当中。 如果你的样式文件大小较大，这会做更快提前加载，因为 CSS bundle 会跟 JS bundle 并行加载。

6.DefinePlugin 允许创建一个在编译时可以配置的全局常量

new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }

7.调试技巧(给webpack添加调试配置)

if (isTest) {
    config.devtool = 'inline-source-map';
} 

作用: 使用source-map可以在debug的时候看到源代码，方便 查错

待续。。。

引用：https://doc.webpack-china.org/plugins/