webpack4使用笔记之plugin

webpack4

常用plugin

• clean-webpack-plugin
• html-webpack-plugin
• mini-css-extract-plugin
• terser-webpack-plugin(webpack4内置)
• optimize-css-assets-webpack-plugin
• webpack-bundle-analyzer

• clean-webpack-plugin

  • 清除文件插件

new cleanWebpackPlugin(
  [resolve('dist'), resolve('build')], {
    root: __dirname,
    exclude:  ['test.html'], // 排除
    verbose: true, // Write logs to console.
    dry: false,    // Use boolean "true" to test/emulate delete. (will not remove files).
    watch: false,     // If true, remove files on recompile. 
    beforeEmit: false // 在将文件发送到输出目录之前执行清理
})

• html-webpack-plugin

  • 自动帮你生成一个 html 文件，并且引用相关的 assets 文件(如 css, js)。
  • 如果你既指定了 template 选项，又指定了 title 选项，那么webpack 会选择哪一个？ 事实上，这时候会选择你指定的模板文件的 title, 即使你的模板文件中未设置 title。

new htmlWebpackPlugin({
    title: 'testooo', // html 文件的标题
    filename: 'detail.html', // 生成 html 文件的文件名。默认为 index.html.
    template: `./src/detail.html`, // 根据自己的指定的模板文件来生成特定的 html 文件
    chunks: ['index', 'vendor'], // 主要是针对多入口(entry)文件。当你有多个入口文件的时候，对应就会生成多个编译后的 js 文件。那么 chunks 选项就可以决定是否都使用这些生成的 js 文件。默认引用所有
    inject: 'body',  // true默认值，script标签位于html文件的 body 底部 注入选项 
    hash: true, //  hash选项的作用是 给生成的 js 文件一个独特的 hash 值 xx.js?xxxxxx
    // 对 html 文件进行压缩
    minify: {
      removeAttributeQuotes:true,
      removeComments: true,
      collapseWhitespace: true,
      removeScriptTypeAttributes:true,
      removeStyleLinkTypeAttributes:true
   }
})

• mini-css-extract-plugin

  • 分离css: 此插件将CSS提取到单独的文件中。
  • 它为每个包含CSS的JS文件创建一个CSS文件。它支持CSS和SourceMaps的按需加载。
  • extract-text-webpack-plugin ，只支持 webpack 4 以下提取 CSS 文件, webpack 4以上用mini-css-extract-plugin

• terser-webpack-plugin(webpack4内置)

  • webpack 4 中删除了 webpack.optimize.CommonsChunkPlugin,并且使用 optimization 中的splitChunk来替代,下面的配置代替了之前的 CommonsChunkPlugin 配置，同意能提取 JS 和 CSS 文件
  • 压缩的配置也移动到了 optimization 选项下，值得注意的是压缩工具换成了 terser-webpack-plugin，这是 webpack 官方也推荐使用的

module.exports = {
    optimization: {
        splitChunks: {
          vendors: {
            name:  'venders',
            chunks:  'all',
            minChunks: chunks.length
        }
      }
}

• optimize-css-assets-webpack-plugin

  • webpack5很可能会内置css压缩,为了压缩输出，可使用optimize-css-assets-webpack-plugin插件。
  • 默认只压缩js，所以通过设置optimization.minimizer覆盖默认的压缩配置，应确保指定了一个JS的压缩配置, 否则默认配置就被覆盖了，就不再压缩js了。
  • 类似extract-text-webpack-plugin，通过optimization.splitChunks.cacheGroups可以将css提取到一个文件中。

module.exports = {
    minimizer: [
      new terserPlugin({ // 压缩js
        cache:  true,
        parallel:  true
      }),
      new optimizeCSSAssetsPlugin({ // 压缩css
        cssProcessorOptions: {
          safe: true
        }
      })
    ],
    optimization: {
        cacheGroups: {
            styles: {            
              name: 'styles',
              test: /\.scss|css$/,
              chunks: 'all',    // merge all the css chunk to one file
              enforce: true
            }
          }
      }
}

• webpack-bundle-analyzer

  • 通过使用webpack-bundle-analyzer可以看到项目各模块的大小，可以按需优化

图片来自于webpack-bundle-analyzer的github