webpack常用 plugin1. html-webpack-plugin 2. clean-webpack-plug

1. html-webpack-plugin

该插件将为你生成一个 HTML5 文件，在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。只需添加该插件到你的 webpack 配置中，如下所示：

var HtmlWebpackPlugin = require('html-webpack-plugin')
 new HtmlWebpackPlugin({
      filename: 'index.html', 
      template: 'index.html', //本地自定义模板
      inject: true|body
 })

2. webpack上

new webpack.EvalSourceMapDevToolPlugin({filename: '[name].js.map', exclude: ['vendor.js']}) 也可以通过 devtool 来配置

new webpack.optimize.CommonsChunkPlugin(options);
通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存到缓存中供后续使用。这个带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件。
new webpack.DefinePlugin(options);
允许在 编译时 将你代码中的变量替换为其他值或表达式
new webpack.HotModuleReplacementPlugin(options);
启用 HMR
new webpack.PrefetchPlugin([context], request);
预取出普通的模块请求(module request)，可以让这些模块在他们被 import 或者是 require 之前就解析并且编译。
new webpack.optimize.MinChunkSizePlugin({ minChunkSize: 10000 })
通过合并小于 minChunkSize 大小的 chunk，将 chunk 体积保持在指定大小限制以上

DllPlugin和DllReferencePlugin

// build/webpack.dll.config.js

const webpack = require('webpack');
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    mode: "production",
    entry: {
        //把第三方库集中打包
        vendor: ['react', 'react-dom', 'moment']
    },
    output: {
        filename: '[name].dll.js',
        path: path.resolve(__dirname, '../static'),
        library: '[name]_lib', 
    },
    plugins: [
        new CleanWebpackPlugin(),
        new webpack.DllPlugin({
            path: path.resolve(__dirname, '../static/[name]-manifest.json'),
            name: '[name]_lib', //这个name 和 library 对应
        })
    ]
};


// build/webpack.base.cong.js
 new webpack.DllReferencePlugin({
      manifest: require(path.join(__dirname, '../static/vendor-manifest.json'))
}),


//1、再public/index.html里面手动把static/vendor.dll.js引入到body后面 
<script src="<%=htmlWebpackPlugin.options.dllName%>"></script>
//2、利用html-webpack-plugin 来引入到 webpack.base.conf.js
 new HtmlWebpackPlugin({
    template: 'public/index.html',
    inject: 'body',
    dllName: ['static/vendor.dll.js']
}),

//  利用 copy-webpack-plugin 把`static`里面的文件移动到 `dist` 里面来
new CopyWebpackPlugin({
        patterns: [
           { from: path.join(__dirname, '../static'),
             to: path.join(__dirname, '../dist/static')},
       ],
}),

3.js相关

uglifyjs-webpack-plugin 压缩js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    plugins: [new UglifyJsPlugin()]
}

4.css相关

mini-css-extract-plugin 抽离css

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    plugins: [
       new MiniCssExtractPlugin({
            filename: "[name].[hash:8].css",
        })
    ]
}

optimize-cssnano-plugin :在ExtractTextPluging之后用于CSS缩小的WebPack 2+插件

optimize-css-assets-webpack-plugin

用于生产环境，对css进行压缩

5. 输出相关

clean-webpack-plugin

clean-webpack-plugin用于在打包前清理上一次项目生成的bundle文件，它会根据output.path自动清理文件夹；这个插件在生产环境用的频率非常高，因为生产环境经常会通过hash生成很多bundle文件，如果不进行清理的话每次都会生成新的，导致文件夹非常庞大

copy-webpack-plugin

打包的时候，将静态资源拷贝到dist目录

const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
    plugins: [
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: 'static/js/*.js',
                    to: path.resolve(__dirname, 'dist', 'js'),
                    flatten: true,
                }
            ]
        }),
    ]
}

6.`optimization.splitChunks`

chunks（以及内部导入的模块）是通过内部 webpack 图谱中的父子关系关联的。CommonsChunkPlugin 曾被用来避免他们之间的重复依赖，但是不可能再做进一步的优化；
从 webpack v4 开始，移除了 CommonsChunkPlugin，取而代之的是 optimization.splitChunks。

webpack 将根据以下条件自动拆分 chunks：

新的 chunk 可以被共享，或者模块来自于 node_modules 文件夹
新的 chunk 体积大于 20kb（在进行 min+gz 之前的体积）
当按需加载 chunks 时，并行请求的最大数量小于或等于 30
当加载初始化页面时，并发请求的最大数量小于或等于 30

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

7.其他

webpack-manifest-plugin

const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
module.exports = {
  ...
  plugins: [
    new WebpackManifestPlugin(options)
  ]
};

webpack-bundle-analyzer
case-sensitive-paths-webpack-plugin 大小写路径
preload-webpack-plugin 插入preload、prefetch标签
NamedModulesPlugin 与 HashedModuleIdsPlugin 持久化缓存

参考文档

webpack官网plugin

欢迎关注我的前端自检清单，我和你一起成长

webpack常用 plugin