webpack5浏览器兼容详解:babel-loader, core-js,plugin-transform-runtime

1，core-js：将我们的代码编译后成为浏览器可执行的代码，其中主要处理 ES 的API，他是运行的一个API 补丁包集合, 也可以理解为：它是JavaScript标准库的 polyfill。
 

官方库对他介绍的形容：
1.1它支持最新的 ECMAScript 标准
1.2它支持ECMAScript 标准库提案
1.3它支持一些 WHATWG / W3C 标准（跨平台或者 ECMAScript 相关）
1.4它最大限度的模块化：你能仅仅加载你想要使用的功能
1.5它能够不污染全局命名空间
1.6它和babel紧密集成：这能够优化core-js的导入
1.7它是最普遍、最流行 的给 JavaScript 标准库打补丁的方式
 

2，plugin-transform-runtime

大致有3大作用：
2.1 自动移除语法转换后内联的辅助函数（inline Babel helpers），使用@babel/runtime/helpers里的辅助函数来替代；
2.2 当代码里使用了core-js的API，自动引入@babel/runtime-corejs3/core-js-stable/，以此来替代全局引入的core-js/stable;
2.3 当代码里使用了Generator/async函数，自动引入@babel/runtime/regenerator，以此来替代全局引入的regenerator-runtime/runtime；
 

3. @babel/plugin-proposal-class-properties 和 @babel/plugin-proposal-object-rest-spread

plugin-proposal-class-properties 和 plugin-proposal-object-rest-spread 帮助生成符合规范的代码

4. 如下代码是使用core-js 处理浏览器兼容性问题的配置：

需要先 安装依赖：
npm i babel-loader @babel/preset-env core-js @babel/plugin-proposal-class-properties
@babel/plugin-proposal-object-rest-spread @babel/plugin-transform-runtime -D
npm i @babel/runtime

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

// npx webpack-dev-server
module.exports = {
    entry: './src/js/main.js', // 文件入口
    output: {
        filename: 'js/bundle.js', // 生成文件
        path: resolve(__dirname, 'dist'), // 生成路径
        clean: true
    },
    module: {
        rules: [{
            test: /\.((c|le)ss)$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            plugin: [
                                // postcss 插件
                                ['postcss-preset-env'],
                                {
                                    // 其他选贼
                                }
                            ]
                        }
                    }
                },
                'less-loader'
            ]
        }, {
            test: /\.(png|jpg|avg|gif)$/,
            parser: {
                dataUrlCondition: {
                    maxSize: 8 * 1024
                }
            },
            generator: {
                filename: 'imgs/[hash:10][ext][query]'
            }
        }, {
            test: /\.html$/,
            loader: 'html-loader'
        }, {
            test: /\.(mp4|ttf|waff2?)$/,
            type: 'asset/resource',
            generator: {
                filename: 'media/[hash:8].[ext][query]'
            }
        }, {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                        [
                            '@babel/preset-env',
                            {
                                useBuiltIns: 'usage',
                                corejs: 3,
                                targets: {
                                    chrome: '58',
                                    firefox: '60',
                                    ie: '8',
                                    safari: '10',
                                    edge: '15'
                                }
                            }
                        ]
                    ],
                    plugins: [
                        '@babel/plugin-transform-runtime',
                        // plugin-proposal-class-properties 和 plugin-proposal-object-rest-spread 帮助生成符合规范的代码
                        '@babel/plugin-proposal-class-properties',
                        '@babel/plugin-proposal-object-rest-spread'
                    ]
                }
            }
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
            chunkFilename: '[id].css'
        }),
        new ESLintWebpackPlugin({
            context: resolve(__dirname, 'src'),
            fix: true
        })
    ],
    mode: 'development',
    devServer: {
        port: 3000,
        compress: true,
        open: true,
        watchFiles: [
            './src/index.html'
        ]
    }
}