生产环境webapck.config.js配置详解

生产环境不同于开发环境在于，生产环境需要优化代码，保证在上线之后运行更快且兼容各大浏览器。以开发环境中css资源打包为例：先把css资源构建一个commmjs模块，形成一个字符串，接着在js文件中创建style标签将构建的字符串插入到style标签中，而如果样式资源很多，会导致js文件很大，同时由于浏览器加载Js文件的机制，势必影响性能，同时插入style标签内容可能也会导致闪屏的情况产生（由于css内容放在js文件中的，且html引入的也是js文件，当具体显示html文件的时候，会动态创建style标签，并将css内容插入到style标签中，同时将style标签插入到head标签中，最后页面显示css样式，而这个动态过程是在浏览器中完成，容易造成闪屏）。因此为了增加用户体验，提高代码运行速度以及兼容性，生产环境则需要解决上述问题，同时也包括：抽取出js文件中的css为单独文件，对代码进行压缩、处理兼容性问题等一系列问题，但是为什么不在开发环境就处理好呢？如果在开发环境中处理这些复杂的问题，会影响开发进度。

1.处理css文件

1.提取出css为单独文件

不同于将css文件写入到打包之后的js文件，此时的css抽取到了单独的css文件中，并通过link进行引入，使得闪屏问题进一步解决，同时js文件大小减小。

用法：

• 下载mini-css-extract-plugin

  npm i -s mini-css-extract-plugin
  

• 引入

  const miniCssExtractPlugin = require('mini-css-extract-plugin');
  

• 配置

   // loader配置
    module: {
       
       
      rules: [
        // css配置
        {
       
       
          test: /\.css$/,
          use: [
            // 让loader取代style-loader，作用：提取js中的css成单独文件，也即类似于截获，当css文件整合到Js文件后，
            // 不再是通过style-loader将js文件中的代码插入到style标签，也是抽取出来形成单独的文件
            miniCssExtractPlugin.loader,
            'css-loader'
          ]
        }
      ]
    },
    // plugins配置
    plugins: [
      new htmlWebpackPlugin({
       
       
        template: './src/webpack_02.html'
      }),
      new miniCssExtractPlugin({
       
       
        // 给css文件重命名
        filename: 'css/main.css'
      })
    ]
  

2.css兼容性处理

采取的是postcss，而postcss的实现需要两个插件：postcss-loader postcss-preset-env

下载：

npm i -s postcss-loader postcss-preset-env

postcss-preset-env作用：帮postcss找到package.json中browserlist里面的配置，通过配置加载指定的css兼容性样式

配置：

  rules: [
      // css配置
     {
   
   
        test: /\.css$/,
        use: [
          miniCssExtractPlugin.loader,
          'css-loader',
          // postcss-loader默认配置 'postcss-loader' 但是此处修改设置
          // 修改配置
          {
   
   
            loader: 'postcss-loader',
            options: {
   
   
              postcssOptions: {
   
   
                // 默认写法
                ident: 'postcss',
                // 方法一：这样写没有兼容性处理代码
                // plugins: () => [
                //   require('postcss-preset-env')()
                // ]
                 // 方法二：这样写有兼容性处理代码
                // plugins: [
                //   require('postcss-preset-env')
                // ]
                // 方法三：或者将插件引入写在单独的配置js中
                config: './postcss.config.js'
              }
            }
          }

        ]
      }
    ]

# 方法三的配置文件
# postcss.config.js

module.exports = {
   
   
  plugins: [
    require('postcss-preset-env')
  ]
}

package.json配置

// 可以去官网查看配置含义
"browserslist": {
   
   
    // 开发环境 需要用此环境 需要设置node环境变量：process.env.NODE_ENV = development
  "development": [
      // 兼容最近一次版本的浏览器
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ],
    // 生产环境 默认是看生产环境 和webpack.config.js中的mode没有关系
  "production": [
      // 99.8的浏览器兼容
    ">0.2%",
      // 不用考虑已不用的浏览器和op_mini
    "not dead",
    "not op_mini all"
  ]
}

由于package.json默认是看生产环境，因此需要在webpack中设置node环境变量来进行查看开发环境：

process.env.NODE_ENV = 'development';
module.exports = {
   
   
    ...
}

原来的css文件：

#box2 {
   
   
    width: 200px;
    height: 200px;
    background-color: #454545;
    display: flex;
    backface-visibility: hidden;
}

经过兼容性处理之后的css文件：

#box2 {
   
   
    width: 200px;
    height