Webpack5学习笔记（三）：Webpack生产环境配置

Webpack5学习笔记（三）：Webpack生产环境配置

Author: 哇哇小仔
Date: 2021-03-18
Webpack版本：webpack 5.24.4 webpack-cli 4.5.0
说明：尚硅谷webpack视频教程总结的原创笔记

第4章：Webpack生产环境配置

4.1 简介

1. 开发环境
   1. 有点：便于调试
   2. 缺点
      1. CSS文件是整合到Js文件中的，而加载时先加载JS再通过加载style标签的形式加载CSS，文件较大时就会出现闪屏。
      2. 有些内容有兼容性的问题
2. 生产环境
   1. 解决上述问题
   2. 但是打包过程比较长，因此有些设置只在生产环境设置

4.2 提取CSS成单独文件

1. 下载插件： npm i mini-css-extract-plugin -D
2. 修改配置文件

        const {resolve} = require('path');
        const HtmlWebpackPlugin = require('html-webpack-plugin');
        const MiniCssExtractPlugin = require('mini-css-extract-plugin');

        module.exports = {
            entry: './src/js/index.js',
            output: {
                filename: 'js/built.js',
                path: resolve(__dirname, 'build')
            },
            module: {
                rules: [
                    {
                        test: /\.css$/,
                        use:[
                            // "style-loader",  // 创建style标签，将样式放入
                            // 这个loader取代style-loader，提取js中的css成单独文件
                            MiniCssExtractPlugin.loader,
                            "css-loader"  // 将css文件整合到js文件中
                        ]
                    }
                ]
            },
            plugins: {
                new HtmlWebpackPlugin({template: './src/index.html'}),
                new MiniCssExtractPlugin({
                    filename: './src/built.css' // 对输出的css文件进行重命名
                })
            },
            mode: "development",
        }

3. 运行指令： webpack
4. 作用
   1. css文件单独分离以后，用过link标签引入，不会出现闪屏
   2. js文件体积不会那么大

4.2 兼容性处理

1. 创建文件
   1. ./src
      1. ./src/css：所有css和less文件
      2. ./src/js：所有js文件
      3. index.html
   2. ./webpack.config.js
2. 下载loader和相应的插件
   npm i --save-dev postcss-loader postcss-preset-env
3. 修改配置文件

        const {resolve} = require('path');
        const HtmlWebpackPlugin = require('html-webpack-plugin');
        const MiniCssExtractPlugin = require('mini-css-extract-plugin');
        // 设置 nodejs 环境变量
        // process.env.NODE_ENV = 'development';

        module.exports = {
            entry: './src/js/index.js',
            output: {
                filename: 'js/built.js',
                path: resolve(__dirname, 'build')
            },
            module: {
                rules: [
                    {
                        test: /\.css$/,
                        use: [
                            MiniCssExtractPlugin.loader, 
                            "css-loader",
                            {    // 用来解决css兼容性的loader
                                loader: 'postcss-loader',
                                options: {
                                    // webpack@5中postcss-loader现在的配置是postcssOptions
                                    postcssOptions: {
                                        ident: 'postcss', // 固定写法, identifier
                                        // postcss 的插件
                                        // 帮助postcss找到package.json中的browserslist里边的配置，
                                        // 通过配置加载指定的兼容性样式
                                        plugins: ["postcss-preset-env"]
                                    }
                                }
                            }
                        ]
                    }    
                ]
            },
            plugins: [
                new HtmlWebpackPlugin({template: './src/index.html'})，
                new MiniCssExtractPlugin({filename: 'css/built.css'})
            ],
            mode: "development"
        }

4. 修改package.json

        "browserslist": {
            "development":[  // 开发模式下
                "last 1 chrome version",  // 向后兼容1个版本(注意json文件中是不允许这样写注释的)
                "last 1 firefox version",
                "last 1 safari version"
            ],
            "production":[  // 生产模式下
                ">0.2%",    // 兼容全球超过0.2%人使用的浏览器
                "not dead",
                "not op_min all"
            ]
        }

4.3 压缩css

1. 创建文件
2. 下载安装包
   npm i optimize-css-assets-webpack-plugin -D
3. 修改配置文件：只需在plugins加入一个新的插件就可以

        ...
        const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
        
        module.exports = {
            entry: ...,
            output: ...,
            module: {...},
            plugins: [
                ...
                new OptimizeCssAssetsWebpackPlugin();
            ],
            mode: ...
        }

4. 运行指令：webpack

4.4 js 语法检查

1. 创建文件：
   JS文件中，可以用 // eslint-disable-next-line 跳过下一行的代码检查

        const add = (x, y) => {    
            return x + y;
        }
        // 下一行eslint所有规则失效（下一行不进行eslint检查）
        // 调试的时候使用，代码上线的时候一定不要加
        // eslint-disable-next-line
        console.log(add(2, 4));

2. 下载安装包
   npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D
3. 修改配置文件

        const {resolve} = require('path');
        const HtmlWebpackPlugin = require("html-webpack-plugin");

        module.exports = {
            entry: './src/js/index.js',
            output: {
                filename: 'js/built.js',
                path: resolve(__dirname, 'build')
            },
            module: {
                rules: [
                    {
                        /*    
                            语法检查：eslint-loader, 依赖于eslint
                            注意：只检查自己写的源代码，第三方的库是不检查的
                            语法检查采用airbnb规则：
                                airbnb ---> eslint-config-airbnb-base  eslint-plugin-import  eslint
                        */
                        test: /\.js$/,
                        exclude: /node_modules/,  // 不检查第三方库
                        loader: 'eslint_loader', 
                        options: {
                            fix: true  // 自动修复不符合规范的编码格式
                        }
                    }
                ]
            },
            plugins: [
                new HtmlWebpackPlugin({template: './src/index.html'});
            ],
            mode: 'development'
        }

4. 修改package.json文件：设置eslint检查规则

    "eslintConfig": {
        "extends": "airbnb-base"  // 采用airbnb规则
        "env":{
            "broswer": true
        }
    }
   

4.5 JS兼容性处理 babel

1. 下载安装包
   npm i babel-loader @babel/core @babel/preset-env @babel/polyfill core-js -D
2. 方案一：基本的js兼容性处理 --> @babel/preset-env
   1. @babel/preset-env：依赖@babel/core（babel的核心库）
   2. 可以将ES6的基本语法转换成ES5，比如const等
   3. 问题：只能转换基本语法，高级语法不能转换，比如promise
   4. 方法：修改配置文件，在module的rules里边加入

            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    // 预设：指示babel做怎么样的兼容处理
                    presets: ["@babel/preset-env"]
                }
            }

3. 方案二：全部js兼容性处理 --> @babel/polyfill
   1. 使用@babel/polyfill（从babel 7.4.0开始，这个包已经被废弃了）
   2. 问题： 我们只需要解决部分兼容性问题，但是这种方法会将所有兼容性代码全部引入，导致打包后的js文件太大
   3. 方法：直接在js文件中引入这个包
      import '@babel/polyfill'
4. 方案三：需要做兼容性处理的才做：按需加载（最终方案） --> core-js
   1. 采用这种方案后不能使用第一和第二种方法，需要将import那个注释掉
   2. 这是最终的解决方案
   3. 方法：

            const {resolve} = require('path');
            const HtmlWebpackPlugin = require('html-webpack-plugin');
            module.exports = {
                entry: './src/js/index.js',
                output: {
                    filename: 'js/built.js',
                    path: resolve(__dirname, 'build')
                },
                module: {
                    rules: [
                        {
                            test: /\.js$/,
                            exclude: /node_modules/,  // 防止转换第三方代码
                            loader: 'babel-loader',
                            options: {
                                presets: [[
                                    '@babel/preset-env',
                                    {    // 按需加载
                                        useBuiltIns: 'usage',
                                        // 指定core-js的版本
                                        corejs: {version: 3},
                                        // 指定兼容性做到哪个版本的浏览器
                                        targets: {
                                            chrome: '60',
                                            firefox: '50',
                                            ie: '9',
                                            safari: '10',
                                            edge: '17'
                                        }
                                    }
                                ]]
                            }
                        }
                    ]
                },
                plugins: [new HtmlWebpackPlugin({template: './src/index.html'})],
                mode: 'development'
            }

4.6 js和html的压缩

1. 最新的webpack只需要将mode改为production模式，就可以对js和html进行压缩
2. 老版本需要给 HtmlWebpackPlugin 添加属性
3. 修改配置文件

        const {resolve} = require('path');
        const HtmlWebpackPlugin = require('html-webpack-plugin');
        module.exports = {
            entry: './src/index.js',
            output: {
                filename: 'js/built.js',
                path: resolve(__dirname, 'build')
            },
            plugins: [
                new HtmlWebpackPlugin({
                    template: './src/index.html',
                    minify: {
                        collapseWithSpace: true,  // 移除空格
                        removeComments: true  // 移除注释
                    }
                })
            ],
            mode: "production"
        }

4.7 生产环境配置

1. 步骤
   1. css文件分离
   2. css文件兼容性处理
   3. css文件压缩
   4. js文件代码规范检查
   5. js文件兼容性处理
   6. html文件打包
   7. 图片资源打包
   8. 其他资源打包
   9. js和html代码压缩
2. 修改配置文件

        const {resolve} = require('path');
        const MiniCssExtractPlugin = require('mini-css-extract-plugin');
        const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
        
        const commonCssLoader = [
            // css文件提取
            MiniCssExtractPlugin.loader,
            'css-loader',
            {
                // css兼容性处理
                loader: 'postcss-loader',
                options : {
                    postcssOptions: {
                        ident: 'postcss',
                        plugins: ['postcss-preset-env']
                    }
                }
            }
        ]

        module.exports = {
            entry: './src/js/index.js',
            output: {
                filename: 'js/built.js',
                path: resolve(__dirname, 'build')
            },
            module: {
                rules: [
                    {
                        test: /\.css$/,
                        use: [...commonCssLoader]
                    },
                    {
                        test: /\.less$/,
                        use: [...commonCssLoader, 'less-loader']
                    },
                    {
                        // 当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
                         // 先执行eslint 再执行babel
                        test: /\.js$/,  // js书写规范检查
                        exclude: /node_modules/,
                        force: 'pre',   // 优先执行
                        loader: 'eslint-loader',
                        options: {fix: true}
                    },
                    {
                        test: /\.js$/,
                        exclude: /node_modules/,
                        use: 'babel-loader',
                        options: {
                            presets: [[
                                '@babel/preset-env',
                                {
                                    useBuiltIns: 'usage',
                                    corejs: {version: 3},
                                    targets: {
                                        chrome: '60',
                                        firefox: '50'
                                    }
                                }
                            ]]
                        }
                    }
                ]
            },
            plugins: [
                // css的文件单独提取
                new MiniCssExtractPlugin({filename: 'css/built.css'}),

            ],
            mode: 'production'
        }