webpack JS兼容性处理

js兼容性处理babel的使用

第一种方式

运行前 ES6 写法

• 目录文件
  
• 下载相关库

npm i babel-loader @babel/core @babel/preset-env core-js -D

• webpack.config.js配置文件

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: './src/js/index.js',
    output: {
        filename: 'js/build.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.js$/, // 全局匹配js文件
                exclude: /node_modules/, // 去除node_modules依赖库的匹配
                loader: 'babel-loader',
                options: {
                    presets: [
                        [
                            '@babel/preset-env',
                            {
                                // 按需加载
                                useBuiltIns: 'usage',
                                // 指定core-js版本
                                corejs: {
                                    version: 3,
                                },
                                // 指定兼容浏览器版本范围
                                targets: {
                                    chrome: '70', // 谷歌版本70及以上
                                    firefox: '62',
                                    ie: '9',
                                    safari: '10',
                                    edge: '17',
                                }
                            }
                        ]
                    ]
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
    ],
    devServer: {
        contentBase: resolve(__dirname, 'build'),
        port: 3000,
        open: true,
        compress: true,
    }
}

• 运行指令 webpack
  兼容性处理后结果如下
  

第二种方式(解决部分代码兼容问题，不推荐使用)

它把所有的兼容性的代码全部引入，体积太大

• 下载相关库
  npm i @babel/polyfill -D
  babel-loader @babel/core @babel/preset-env core-js (引入过就不需要重新引入)
• 引入 @babel/polyfill
  
• 运行指令 webpack
  兼容性处理后结果如下