生产环境配置

1、CSS样式文件处理

1.1、提取CSS样式成单独文件

注意在开发环境配置中我们对css的处理是通过css-loader和style-loader将css添加输出的js文件中是和js在一个文件中的，这样会导致加载的时候因为文件过大而缓慢，届时dome已经渲染了还有加载到css样式的话，浏览器会先加载默认的样式，而后加载完又会重新应用css文件中的样式，这样会造成内容闪烁.

因此我们要构建生产环境的话就单独提取出css样式

1.1.1、安装mini-css-extract-plugin

将css样式从js中分离除了要原有的css-loader和mini-css-extract-plugin然后使用MiniCssExtractPlugin.loader替换style-loader达到单独提取的目的而不是通过style-loader将css创建style字符串添加到js文件中

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

1.1.2、配置

webpack.prod.js如果是生产和开发都需要的配置就放在了webpack.common.js中配置了

const MiniCssExtractPlugin=require("mini-css-extract-plugin")module.exports={    mode: 'production',    //entry在通用配置中配置（自己根据情况而定）    //output在通用配置中配置（自己根据情况而定）    module:{        rules:[            {                test:/\.css$/,                use:[                    //使用MiniCssExtractPlugin.loader取代style-loader                    MiniCssExtractPlugin.loader,                    "cass-loader"                ]            }        ]    },    plugins:[        new MiniCssExtractPlugin(            //对输出的css文件指定路径和重命名            filename:"css/index.css"        )    ]
}

1.2、CSS兼容性处理

CSS兼容性处理需要使用postcss库，那么我们要通过webpack处理呢就需要postcss-loader和postcss-preset-env

postcss-preset-env
帮助postcss找到package.json中browserslist的配置，通过这个配置加载指定的css兼容性样式

postcss-loader
根据postcss-preset-env找到的browserslist兼容性配置生成相应的兼容性样式

注意 postcss-preset-env默认是找到package.json中browserslist的生产环境配置如果需要转换为开发环境需要声明 process.env.NODE_ENV="development"

1.2.1、下载安装

npm i --save-dev postcss-loader postcss-preset-env

1.2.2、配置

webpack.prod.js如果是生产和开发都需要的配置就放在了webpack.common.js中配置了

const MiniCssExtractPlugin=require("mini-css-extract-plugin")//设置nodejs环境变量为开发环境变量 默认是生产环境变量process.env.NODE_ENV="development"
module.exports={    mode: 'production',    //entry在通用配置中配置（自己根据情况而定）    //output在通用配置中配置（自己根据情况而定）    module:{        rules:[            {                test:/\.css$/,                use:[                    //使用MiniCssExtractPlugin.loader取代style-loader                    MiniCssExtractPlugin.loader,                    "cass-loader",                    {                        loader:"postcss-loader",                        options:{                            ident:"postcss-loader",                            plugins:()=>{                                require("postcss-preset-env")()                                //帮助postcss找到package.json中browserslist的配置，通过这个配置加载指定的css兼容性样式                            }                        }                    }                ]            }        ]    },    plugins:[        new MiniCssExtractPlugin(            //对输出的css文件指定路径和重命名            filename:"css/index.css"        )    ]
}

package.json

"browserslist": {    "production": [      ">0.5%", //大于99.5%的浏览器      "not dead",//不要已死浏览器      "not op_mini all" //不要op_mini浏览器    ],    "development": [      "last 1 chrome version", //兼容最近的一个chrome      "last 1 firefox version",//兼容最近的一个firefox      "last 1 safari version"//兼容最近的一个safari    ]  }

1.3、压缩css

1.3.1、安装插件

npm install --save-dev optimize-css-assets-webpack-plugin

1.3.2、最基本配置

webpack.prod.js

  const MiniCssExtractPlugin=require("mini-css-extract-plugin")+ const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');  module.exports={      mode: 'production',      //entry在通用配置中配置（自己根据情况而定）      //output在通用配置中配置（自己根据情况而定）      module:{          rules:[              {                  test:/\.css$/,                  use:[                      //使用MiniCssExtractPlugin.loader取代style-loader                      MiniCssExtractPlugin.loader,                      "cass-loader",                      {                          loader:"postcss-loader",                          options:{                              ident:"postcss-loader",                              plugins:()=>{                                  require("postcss-preset-env")()                                  //帮助postcss找到package.json中browserslist的配置，通过这个配置加载指定的css兼  容性样式                              }                          }                      }                  ]              }          ]      },      plugins:[          new MiniCssExtractPlugin(              //对输出的css文件指定路径和重命名              filename:"css/index.css"          ),+         new OptimizeCssAssetsPlugin()      ]    }  

2、JS处理

2.1、js语法检查eslint-loader

npm i --save-dev eslint-loader eslint

npm i --save-dev eslint-config-airbnb-base eslint-plugin-import

package.json配置eslintConfig

"eslintConfig":{    "extends":"airbnb-base"}

module:{    rules:[        {            test:/\.js$/,            exclude:/node_modules/,//第三方库除外            loader:"eslint-loader",             options:{                fix:true            }        }    ]}

2.2、js兼容性处理

npm i --save-dev babel-loader @babel/core @babel/preset-env core-js

module:{    rules:[        {            test:/\.js$/,            exclude:/node_modules/,//第三方库除外            loader:"babel-loader",             options:{                presets:[                    [                        '@babel/preset-env',                        {                            useBuiltIns:"usage",                            corejs:{                                version:3                                },                            trrgets:{                                chrome:"60",                                ie:"9"                                }                        }                    ]                ]            }        }    ]}

将有兼容问题的代码全部转换

npm i --save-dev @babel/polyfill

在要全部转换的页面引入即可import "@babel/polyfill"

2.3、js压缩

将mode:"production"就会执行默认的压缩

3、生成环境基本配置

const {resolve}=require('path')const MiniCssExtractPlugin=require("mini-css-extract-plugin")const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');module.exports={    mode:"production",    entry:"/src/index.js",    output:{        filename:"js/index.js",        path:resolve(__dirname,"dist")    },    module:{        rules:[            {            test:/\.css$/,            use:[                 MiniCssExtractPlugin.loader,                "css-loader",                 {                        loader:"postcss-loader",                        options:{                            ident:"postcss-loader",                            plugins:()=>{                                require("postcss-preset-env")()                                //帮助postcss找到package.json中browserslist的配置，通过这个配置加载指定的css兼容性样式,package.json中要配置好browserslist                            }                        }                    }                ]            }            {            test:/\.less$/,            use:[                 MiniCssExtractPlugin.loader,                "css-loader",                {                        loader:"postcss-loader",                        options:{                            ident:"postcss-loader",                            plugins:()=>{                                require("postcss-preset-env")()                                //帮助postcss找到package.json中browserslist的配置，通过这个配置加载指定的css兼容性样式,package.json中要配置好browserslist                            }                        }                    }                "less-loader"                ]            },             {            test:/\.js$/,            exclude:/node_modules/,//第三方库除外            loader:"babel-loader",             options:{                presets:[                    [                        '@babel/preset-env',                        {                            useBuiltIns:"usage",                            corejs:{                                version:3                                },                            trrgets:{                                chrome:"60",                                ie:"9"                                }                        }                    ]                ]            }        }
        ]    },    plugins:[        new MiniCssExtractPlugin({            filename:"css/index.css"        }),         new OptimizeCssAssetsPlugin()    ]
}