官方文档：webpack.docschina.org/

生产环境准备工作

生产环境打包，主要对代码进行压缩，优化
可以把开发环境和生产环境的配置文件放到config文件夹下，一个为webpack.dev.js一个为webpack.prod.js
配置文件分开后有什么变动？
因为配置文件位置改变，执行代码是在根目录，所以相对路径不用更改，绝对路径都要变动，
生产环境没有打包输出，所以output的path和clean都不需要配置。
生产环境不需要开发服务器的相关配置，另外mode需要改成production。
在package.json文件配置script脚本命令：

"scripts": {
    "start": "npm run dev",
    "dev": "webpack server --config ./config/webpack.dev.js", // 前面的npx可以省略
    "build": "webpack --config ./config/webpack.prod.js" // 前面的npx可以省略
  },

生产环境 css处理

提取css成单独文件

目前css打包到了js文件中，当js文件加载时会创建一个style标签生成样式，
这样对于网站来说会出现闪屏现象，用户体验不好。
我们应该单独打包css，通过link标签加载性能才好。
安装插件：

npm install --save-dev mini-css-extract-plugin

webpack配置：
1、需要将所有用到style-loader的地方否替换为MiniCssExtractPlugin.loader
2、调用该插件并改变输出路径
例如：

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 引入插件
module: {
    rules: [
      // loader的配置
      // css-loader
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader, // 把原来的"style-loader"改成MiniCssExtractPlugin.loader，该loader会提取css成单独的文件
          "css-loader"
        ],
      }
    ]
},
// 插件
plugins: [
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 改变css文件输出后的路径
      filename: 'static/css/main.css'
    }),
],

css兼容性处理

css也需要做兼容性问题，这里用postcss-loader就可以了；
下载loader

npm i postcss-loader postcss postcss-preset-env -D

webpack配置：
postcss-loader需要在css-loader的后面，在less-loader的前面
这里拿处理less的loader为例，其它的都一样：

module: {
    rules: [
      // loader的配置
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env', // 能解决大多数样式兼容性问题
                    {
                      // 其他选项
                    },
                  ],
                ],
              },
            },
          },
          'less-loader',
        ],
      },
    ]
  },

指定postcss-loader把样式兼容到上面程度，
需要在package.json的browserslist指定：

"browserslist": [
    "ie >= 8" // 样式兼容ie8及以上版本
 ]
实际开发中，不会兼容到ie8了，我们经常会这样写：
"browserslist": [
    "last 2 version", // 所有浏览器，比如市面上的Chrome、Safari、Firefox、ie等等，都兼容它最近的两个版本
    "> 1%", // 覆盖99%的浏览器,比较冷门的浏览器就不兼容了
    "not dead" // 有些浏览器在发展的过程中已经下架了，就不要兼容了
 ]

封装样式loader函数

项目中用了css、less、sass、stylus，配置的loader有很多重复代码，可以封装成一个函数，会变得简单

// 获取处理样式的loader
const getStyleLoader = (pre) => {
  return [
    // compiles Less to CSS
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: [
            [
              'postcss-preset-env', // 能解决大多数样式兼容性问题
              {
                // 其他选项
              },
            ],
          ],
        },
      },
    },
    pre,
  ].filter(Boolean)
}
// 加载器
  module: {
    rules: [
      // loader的配置
      // css-loader
      {
        test: /\.css$/i, // 检测.css结尾的文件
        use: getStyleLoader(),
      },
      {
        test: /\.less$/i,
        use:  getStyleLoader('less-loader'),
      },
      {
        test: /\.s[ac]ss$/i,
        use: getStyleLoader('sass-loader'),
      },
      {
        test: /\.styl$/i,
        use: getStyleLoader('stylus-loader'),
      },
    ]
  },

css压缩

需要用到css-minimizer-webpack-plugin插件
安装：

npm install css-minimizer-webpack-plugin --save-dev

webpack配置：

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
// 插件
  plugins: [
    // css压缩
    new CssMinimizerPlugin()
 ],

生产环境总结

生产环境主要对css进行了兼容处理和压缩，那么html、js在生产环境下自动做了压缩，不需要我们额外做配置。

webpack5-生产环境