四时宝库

前面HMR和source-map是开发环境下的优化，下面我们要为生产环境优化一下，首先就是缓存。

1，babel缓存，只需要cacheDirectory设置为true，即可开启，第二次构建时会读取之前的缓存，构建速度会更快一点。（可以在node_modules/.cache/babel-loader里观察到）

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    cacheDirectory: true//开启babel缓存
  }
}

2，针对文件资源进行缓存。

[hash]，每次webpack构建的时候会生成一个唯一的hash值，无论文件内容是否改变。

[chunkhash]，每个chunk就会生成一个唯一的hash值，因为js引入了css，因此，js和css的hash值是一样的。

[contenthash]，根据文件内容的不同生成一个唯一的hash值，每个文件都有不同的hash值。

根据不同的情况合理的运用即可，因此，我将output里的filename使用了chunkhash；而分离出来的css的filename使用contenthash；其他图片，字体等文件默认使用的就是contenthash，则无需修改。

webpack.prod.js的配置如下：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//打包html
const miniCssExtractPlugin = require('mini-css-extract-plugin');//分离样式
const cssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');//压缩css
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.base.js');
let prodConfig = {
  entry: './src/main.js',
  output: {
    filename: 'bundle-[name]-[chunkhash].js',
    path: resolve(__dirname, '../dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [miniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
      },
      {
        test: /\.less$/,
        use: [miniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
      },
      {
        test: /\.scss$/,
        use: [miniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          cacheDirectory: true//开启babel缓存
        }
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/assets/index.html',
      hash: true,
      filename: 'index.html',
      favicon: './src/assets/favicon.ico',
      minify: {
        collapseWhitespace: true,//移除空格
        removeComments: true,//移除注释
      }
    }),
    new cssMinimizerWebpackPlugin(),
    new miniCssExtractPlugin({
      filename: 'index-[name]-[contenthash].css'
    })
  ],
  mode: 'production',
  target: 'es5',
}
module.exports = merge(commonConfig, prodConfig);

git仓库地址：

https://gitee.com/seimin/xiaoming2qianduan-webpack5/tree/v5.14/