webpack生产环境配置

生产环境和开发环境略有不同主要解决的问题有：

为了减小js体积，把css代码从js代码中提取出来，让代码运行速度加快
css兼容性处理
压缩文件（css，js，html文件都需要压缩）
js语法检查
js兼容性处理

1：提取css

1）步骤：安装一个插件

npm install --save-dev mini-css-extract-plugin:

2）修改配置文件：主要有两点：

a.引入插件

b.修改loader中的css处理使用的loader

c.配置插件

2：css兼容性处理

1：下载兼容性处理的loader

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

2:修改配置文件

3：在package.json中添加开发环境和生产环境的浏览器适配

4：默认使用生产环境，如果要使用生产环境，则需要在webpack.config.js中加上一句

3：压缩css

1：下载压缩css的插件

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

2：修改配置文件

直接使用插件即可

结果如下所示：

4：js语法检查

1：首先需要是四个插件：

eslint

eslint-loader

eslint-config-airbnb-base

eslint-plugin-import

2：在loader配置中设置

3：然后再packag.json中设置

5：js兼容性处理

1.下载一系列包

babel-loader

@babel/core

@babel/preset-env

@babel/polyfill core-js

2.修改配置文件

{
                /* 
                // 详细的loader配置
                // js兼容性处理：babel-loader @babel/preset-env @babel/core
                // 1.基本的js兼容性处理 -->@babel/preset-env
                // 问题：只能转化基本语法，如promise不能转化
                // 2.全部的js兼容性处理 -->@babel/polyfill
                // 存在的问题是：只解决了部分兼容性问题，但是所有的兼容性代码都引入，体积太大了，
                // 3.需要做兼容性处理，按需加载   -->使用core.js
                 */
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: [
                        [
                            '@babel/preset-env',
                            {
                                // 按需加载
                                useBuiltIns: 'usage',
                                // 指定corejs版本
                                corejs: {
                                    version: 3
                                },
                                targets: {
                                    chrome: '60',
                                    firefox: '60',
                                    ie: '9',
                                    safari: '10',
                                    edge: '17'
                                }
                            }
                        ]
                    ]
                }
            },