webpack js兼容性处理

index.js

1. 全部js兼容性处理。js内引入babel/polyfill

// 全部js兼容性处理。 @babel/polyfill
import '@babel/polyfill';

const add = (x, y) => {
    return x + y;
}
console.log(add(3, 5));

const promise = new Promise((resolve) => {
    setTimeout(() => {
        console.log('定时器执行完了~');
        resolve();
    }, 1000)
})
console.log(promise);

2. 兼容性处理的： 按需加载。 core-js，需要webpack中配置

// import '@babel/polyfill';

const add = (x, y) => {
    return x + y;
}
console.log(add(3, 5));

const promise = new Promise((resolve) => {
    setTimeout(() => {
        console.log('定时器执行完了~');
        resolve();
    }, 1000)
})

console.log(promise);

webpack.config.js

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

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/build.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            /**
             * js兼容性处理： babel-loader @babel/core @babel/preset-env
             * 1. 基本js兼容性处理 @babel/preset-env
             *  问题： 只能转换基本语法，如promise不能转换
             * 2. 全部js兼容性处理。 @babel/polyfill
             *  问题： 只要解决部分兼容性问题，但是所有兼容性代码全部引入，体积太大。
             * 3. 兼容性处理的： 按需加载。 core-js
             */
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    // 预设：指示babel做怎么样的兼容性处理，普通简单转换处理。
                    // presets: [
                    //     '@babel/preset-env'
                    // ]
                    // 按需加载，上面注释。js中注释 import
                    presets: [
                        [
                            '@babel/preset-env',
                            {
                                // 按需加载
                                useBuiltIns: 'usage',
                                // 制定 core-js的版本
                                corejs: {
                                    version: 3
                                },
                                // 指定兼容性做到哪个版本的浏览器
                                targets: {
                                    chrome: '60',
                                    firefox: '60',
                                    ie: '9',
                                    safari: '10',
                                    edge: '17'
                                }
                            }
                        ]
                    ]
                }
            }
        ]
    },
    // 插件
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        }),
    ],
    // 模式 development 开发， production 生产
    mode: 'development',
}