webpack 生产环境相关

Posted 2021-05-17 ~往无前

webpack生产环境配置就是当代码上线时保证可以正常运行。之前我我们提到的Babel，以及将css文件打包成单独文件的插件都是生产环境的配置。

一、CSS兼容性处理

1.安装

 npm install postcss-loder postcss-preset-nev --save

2.文件配置

改配置必须在css-loader之前掉用

 rules:[
           { 
               test:/\\.css$/,
               use:[
                   'css-loader',
                {
                    loader:'postcss-loader',
                    options:{
                        //新版本配置写在postcssOptions中,PostcsspresetEnv写在plugins中
                        postcssOptions:{
                            // ident:'postcss',
                            plugins:[
                                [
                                    PostcssPresetEnv
                                ]
                            ]
                               
                        }
                    }

                }
                
                ]
            }
        ]

package.json文件中配置

//设置node.js环境变量
process.env.NODE_ENV='development';


 //帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
 "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
 //生产环境是默认的配置，如果想要是开发环境配置，必须得进行上面的node.js环境变量的设置。
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },

二、CSS压缩处理

1.安装插件

 npm install optimize-css-assets-webpack-plugin

2.配置文件

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

三、html，js文件压缩

对于js文件，如果是生产环境，会自动将js文件进行压缩

1.安装插件

这个插件我们之前用来导出一个html文件，当然给予一定的配置，也可以进行代码的压缩。

 	npm install html-webpack-plugin

2.文件配置

    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            //压缩html文件
            minify:{
                //移除空格
                collapseWhitespace:true,
                //移除注释
                removeComments:true
            }
        }),
    ],
     //生产环境自动压缩
    mode:"production",

四、语法检查

语法检查是为了保证所有的程序员所写的代码都是同一种规则的，这时候使用语法检查就可以找出不符合规则的代码。

1.安装

npm install eslint-loader eslint eslint-config-aribnb-base  eslint-plugin-import --save

2.文件配置

 {
               test:/\\.js$/,
               exclude:/node_modules/,
               loader:'eslint-loader',
               options:{
                   //自动修复eslint的错误
               		fix:true
               }
           }

package.json的配置

 "eslintConfig": {
    "extends": "airbnb-base",
    "env": {
      "browser": true
    }
  },

在js文件中如果想要对下一行的所有规则都失效（下行不进行eslint检查）

// eslint-disable-next-line
console.log(add(2, 5));