3、webpack生产环境基本配置

开发环境问题

1、开发环境中的css是在js文件中，需要先下载js代码然后创建style标签，会出现闪屏现象，生产环境需要将css代码从js代码中提取出来
2、js、css代码需要进行压缩
3、css、js具有兼容性问题
–> 1、让代码性能更好、运行更快。2、兼容浏览器

生产环境webpack.config.js 配置

1、mini-css-extract-plugin 提取js中的css，形成单独的文件

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

2、postcss-loader postcss-preset-env 对css做兼容性处理

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

3、optimize-css-assets-webpack-plugin,压缩css

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

4、eslint 语法检查，eslint-config-airbnb-base 、eslint-plugin-import、 eslint

5、js兼容性处理

npm install --save-dev babel-loader @babel/core @babel/preset-env
@babelpolyfill core-js -D

const { resolve } =require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
cosnt OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
module.exports={
    entry: './src/js/index.js',
    output:{
        filename: 'js/built.js',
        path: resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use: [
                   //MiniCssExtractPlugin.loader取代style-loader,用于将js中的css单独提取出来形成单独文件 
                   MiniCssExtractPlugin.loader,
                   'css-loader',
                   
                   // css兼容性处理，需要安装postcss-loader、postcss-preset-env
                   // loader的默认配置，直接写字符串 'postcss-loader',如果修改配置，则是用对象模式{}
                   {
                       loader: 'postcss-loader',
                       options: {
                           ident: 'postcss',
                           // postcss插件，帮助postcss找到package.json 中的browserslist的配置，通过配置加载指定兼容性
                           plugins:()=>[
                               require('postcss-preset-env')
                           ]
                       }
                   }      
                ]
            },
            /*
              正常来讲，一个文件只能被一个loader.当一个文件被多个loader处理时，要指定先后顺序，使用enfore: 'pre'配置先执行            */
            /*
             语法检查：eslint-loader eslint
               注意：只检查自己的代码，第三方库不用检查
               设置检查规则：package.json 中的eslintConfig 中设置
                 “eslintConfig”:{
                     "extends": "airbnb-base"                 
                 }
                 // 使用airbnb 需要下载如下两个库
                 airbnb -->eslint-config-airbnb-base eslint-plugin-import eslint
                 
                 // eslint-disable-next-line 可以使用该注释后的代码不被eslint检查
            */
            {
                test:/\.js$/,
                exclude: /node_modules/,
                enforce: 'pre'
                loader: 'eslint-loader',
                // 设置自动修复错误
                options:{
                    fix:true
                }
            },
            /*
              1、js基本兼容性处理：babel-loader @babel/core @babel/preset-env,只能转换基本的语法，如promise 不能转换
              2、全部兼容性处理：@babel/ployfill,使用时只需引入即可：import '@babel/ployfill',会引入js的全部兼容性，如果
                 只需解决部分兼容性问题，会造成体积太大
              3、需要做兼容性处理就做：按需加载 使用core-js                   
            */
            {
                test: /\.js$/,
                exclude: /noder_modules/,
                loader: 'babel-loader',
                options:{
                    //预设：指示babel如何做兼容性处理
                    presets:[
                        '@babel/preset-env',
                        {
                            // 按需加载
                            useBuiltIns: 'usage',
                            // 指定core-js版本
                            corejs:{
                                version: 3
                            },
                            // 指定兼容性做到那个浏览器版本
                            targets:{
                                chrome: '60',
                                firefox: '60',
                                ie: '9',
                                safari: '10',
                                edge: '17'
                            }
                        }
                    ]
                }
            },
            {
                test:/\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options:{
                    limit: 8*1024,
                    name: '[hash:10].[ext]',
                    outputPath: 'imgs',
                    esModule: false
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                exclude:/\.(js|css|less|html|jpg|png|gif)/,
                loader: 'file-loader',
                options:{
                    outputPath: 'media'
                }
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: './src/index.html'，
            // 压缩html代码
            minify:{
                // 移除空格
                collapseWhitespace: true,
                // 移除注释
                removeComments: true
            }
        }),
        // 将css代码单独提取出来，形成单独的文件
        new MiniCssExtractPlugin({
            // 对提取出来的css文件进行重命名
            filename: 'css/built.css'
        }),
        // 压缩css代码
        new OptimizeCssAssetsWebpackPlugin()
    ],
    // 生产环境自动压缩js代码
    mode: 'production'
}

package.json配置

"eslintConfig":{
    "extends": "airbnb-base",
    "env":{
        "browser": true
    }
}，
// 
"browserslist":{
    // development: 开发环境配置
    // production: 生产环境配置
    // 默认使用生产环境配置，如果要使用开发环境配置，需要在webpack.config.js中配置process.env.NODE_ENV=development
    "development":{
        // 兼容最近的chrome firefox safari 浏览器
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"    
    },
    "production":{
        // 大于98%的浏览器
            ">0.2%"，
            " not dead",
            "not op_mini all"
    }
}