webpack4 配置

webpack4 出来也有一段时间了，研究了一下webpack的配置相关：

1.optimization.minimizer.TerserPlugin 插件代替了之前的uglifyjs-webpack-plugin插件 来做代码压缩和tree-shaking

推荐配置：

new TerserPlugin({
          terserOptions: {
            parse: {
              // we want terser to parse ecma 8 code. However, we don't want it
              // to apply any minfication steps that turns valid ecma 5 code
              // into invalid ecma 5 code. This is why the 'compress' and 'output'
              // sections only apply transformations that are ecma 5 safe
              // https://github.com/facebook/create-react-app/pull/4234
              ecma: 8,
            },
            compress: {
              ecma: 5,
              warnings: false,
              // Disabled because of an issue with Uglify breaking seemingly valid code:
              // https://github.com/facebook/create-react-app/issues/2376
              // Pending further investigation:
              // https://github.com/mishoo/UglifyJS2/issues/2011
              comparisons: false,
              // Disabled because of an issue with Terser breaking valid code:
              // https://github.com/facebook/create-react-app/issues/5250
              // Pending futher investigation:
              // https://github.com/terser-js/terser/issues/120
              inline: 2,
            },
            mangle: {
              safari10: true,
            },
            output: {
              ecma: 5,
              comments: false,
              // Turned on because emoji and regex is not minified properly using default
              // https://github.com/facebook/create-react-app/issues/2488
              ascii_only: true,
            },
          },
          // Use multi-process parallel running to improve the build speed
          // Default number of concurrent runs: os.cpus().length - 1
          parallel: true,
          // Enable file caching
          cache: true,
          sourceMap: shouldUseSourceMap,
        }),

2.optimization.minimizer.splitChunks 插件替代了之前的CommonsChunkPlugin插件来做公共包的拆分

推荐配置：默认配置

splitChunks: {
        chunks: 'all',
        name: false,
      },

常用插件：

3.HtmlWebpackPlugin 在html中插入js

推荐配置：

new HtmlWebpackPlugin(
        Object.assign(
          {},
          {
            inject: true,
            template: paths.appHtml,
          },
          isEnvProduction
            ? {
                minify: {
                  removeComments: true,
                  collapseWhitespace: true,
                  removeRedundantAttributes: true,
                  useShortDoctype: true,
                  removeEmptyAttributes: true,
                  removeStyleLinkTypeAttributes: true,
                  keepClosingSlash: true,
                  minifyJS: true,
                  minifyCSS: true,
                  minifyURLs: true,
                },
              }
            : undefined,
        ),
      ),

4.MiniCssExtractPlugin 拆分css文件，如果不使用这个插件默认会吧js和css打包在一起。

推荐配置：

loader: 在css loader 中添加
     {
        loader: MiniCssExtractPlugin.loader,
        options: { publicPath: '../../' },
      }
plugin:
        new MiniCssExtractPlugin({
          filename: 'static/css/[name].[contenthash:8].css',
          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
        }), 

5.case-sensitive-paths-webpack-plugin

这个Webpack插件强制所有需要的模块的整个路径匹配磁盘上实际路径的具体情况。使用这个插件可以帮助减轻开发人员在OSX上工作的情况，因为OSX不遵循严格的路径敏感性，这会导致与其他开发人员的冲突，或者构建运行其他操作系统的盒子，这些系统需要正确的路径。

推荐配置：

new CaseSensitivePathsPlugin()