webpack 代码压缩

js文件压缩

webpack 4 内置了uglifyjs-webpack-plugin，js默认是压缩过的

css文件压缩

使用optimize-css-assets-webpack-plugin 和 cssnano预处理器

  plugins: [
    // 把css提取成单独的文件
    new MiniCssExtractPlugin({
      filename: '[name]_[contenthash:8].css'
    }),
    // css压缩
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require('cssnano')
    }),
  ]

html 文件压缩

使用 html-webpack-plugin

  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src/search.html'), // 文件目录
      filename: 'search.html', // 打包出来的html文件名称
      chunks: ['search'], // 指定生成的html使用哪些chunk
      inject: true, // true，打包出来的chunk：js、css会自动注入到这个chunk里面
      minify: {
        html5: true,
        collapseWhitespace: true,
        preserveLineBreaks: false,
        minifyCSS: true,
        minifyJS: true,
        removeComments: false
      }
    }),
  ]