可有可无的准备工作：
-
将生产模式和开发模式下的两种配置文件放在一个config的文件夹下。
-
为了方便两个模式的分别运行，在package.json 文件里面设置快捷运行指令。
1 . 处理 CSS 资源
如果按照之前讲的，CSS文件会被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式。但这样对网站来说，会出现闪屏现象。
解决方案： 应该是打包成单独的 CSS 文件，通过 link 标签来引入加载。
步骤：
-
下载包：
- npm i mini-css-extract-plugin -D
-
引入插件：
- 插件的配置：
1 . 2 CSS 兼容性处理：
-
下载包
-
npm i postcss-loader postcss postcss-preset-env -D
-
-
配置
注意： postcss-loader需要配置在 css-loader的后面，同时又得在 less-loader的前面
- 可以在package.json里面进行配置，想要浏览器兼容到什么程度。
实际上，我们经常这样配置兼容性程度：
这三个配置信息我们会取交集，即先包含市面上99% 的浏览器，然后去除这些浏览器已经淘汰的版本，然后再只包含这些浏览器最新的两个版本！！！！
1 . 3 封装样式 loader 函数
less 、sass 文件的loader配置跟 css 文件的配置有很多重复的，如果每个都重写一遍，会显得很冗长，所以可以将重复的代码封装一个函数（返回这些重复的代码），需要时调用即可。
注意：
-
除了这些重复的代码，可能不同文件会有自己的独特的loader，所以可以将这些独特的作为参数传进去！！！！
-
如果没有参数传进去，pre 就会是 undefined，所以此时需要一个过滤函数将没传参数的 pre 过滤掉！！！
1 . 4 CSS 的压缩：
-
下载插件
- npm install css-minimizer-webpack-plugin --save-dev
-
配置
- 引入后，在webpack.config.js配置文件中，插件部分里 new 出来
1 . 5 补：
生产模式下，html和js资源已经默认开启了压缩模式！！！！
