【Webpack】生产环境(css资源打包相关)优化

开发环境

只是能让代码运行成功

运行项目指令：

• webpack 会将打包结果输出

  • 如果想指定输出路径 需要在module对应匹配配置中加 options: { outputPath: 'imgs'}
  • 样式文件不会输出，是因为【css-loader】打包到js文件里了

• npx webpack-dev-server 只会在内存中编译打包，没有输出

生产环境

问题一：

打包后，如果css在js中，会使js文件过大，先加载js才能通过创建style标签加入到页面中，会有闪屏的问题

解决：提取css成单独文件

• 需要下载插件mini-css-extract-plugin

1. lodaer中的：MiniCssExtractPlugin.loader–>这个loader取代style-loader，提取js中的css成单独文件。
2. plugin中的：MiniCssExtractPlugin --> 配置插件，其中的filename将输出的css文件重命名（默认是main.css）

• css兼容性处理：postcss
  postcss-loader（loader）, postcss-preset-env(插件)
  帮postcss找到package.json中!!!browserslist里面的配置，通过配置加载指定的css兼容性样式

// ～！设置在最外层 // node 环境变量 : 决定使用browerlist哪个环境
process.env.NODE_ENV = 'development'

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
        MiniCssExtractPlugin.loader, //1
        'css-loader', //2
          // 使用loader的默认配置 --> 'postcss-loader' //3
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [require('postcss-preset-env')()]
            }
          }
        ]
      }
    ]
 },
   plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
    // 将输出的css文件重命名（默认是main.css）
      filename: 'css/built.css'
    })
  ],

package.json加如下，了解就好

"browserslist": {
  // 开发环境 --> 设置环境变量：process.env.NODE_ENV = 'development'
	"development": [
    "last 1 chrome version",
    "last 1 firefox version"
  ],
  // 生产环境：默认是看生产环境
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ]
}

问题二：

css文件太大，需要压缩

插件：css-minimizer-webpack-plugin

plugins: [
    // 压缩css
    new CssMinimizerWebpackPlugin()
  ],

扩展：压缩html和js

• js压缩: 生产环境下会自动js压缩：mode: ‘production’
• html压缩：HtmlWebpackPlugin插件增加minify（!!新版本只要改为生产环境，不用minify就可以压缩）

注意：
正常来讲，一个文件只能被一个loader处理，当一个文件要被多个loader处理，那么一定要指定loader执行的顺序 (先执行eslint, 在执行babel, 需要先格式化代码，再从es6转换为es5（这样浏览器才能识别） --> 在module 中加enforce: ‘pre’ 属性，可以优先执行)

# 压缩html
plugins: [
  new HtmlWebpackPlugin(
    // 复制'./src/index.html’文件, 并自动引入打包输出的所有资源（js/css）
    {
      template: './src/index.html'
	  minify:{
        // 移除空格 
      	collapseWhitespace: true,
      	// 移除注释
      	removeComments: true
    }
  )
],