webpack 之js兼容性处理

webpack 之js兼容性处理

// 用来拼接绝对路径的方法
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // webpack 配置

    // 入口起点
    entry : './src/index.js',
    // 输出
    output : {
        // 输出文件名
        filename : 'js/built.js',
        // 输出路径
        path : resolve(__dirname, 'dist')
    },
    // loader 配置
    module : {
        rules : [
            /*
                js 兼容性处理：babel-loader @babel/core @babel/preset-env
                    1. 基本js兼容性处理 --> @babel/preset-env
                        问题：只能转换基本语法，如Promise不能转换
                    2. 全部js兼容性处理 --> @babel/polyfill   使用时直接在js文件里面引入：import '@babel/polyfill'
                        问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了
                    3. 需要做兼容性处理的就做：按需加载 --> core-js
            */
            {
                test: /\.js$/,
                exclude: /node_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'
                                }
                            }
                        ]
                    ]
                }
            }
        ]
    },
    // plugins 的配置
    plugins : [
        // 详细 plugins 的配置
        // html-webpack-plugin
        // 功能：默认会创建一个空的html文件，自动引入打包输出的所有资源（js/css）
        new HtmlWebpackPlugin({
            // 增加一个配置
            // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（js/css）
            template : './src/index.html'
        })
    ],
    //模式
    mode : 'development', // 生产模式
    // mode : 'production' // 开发模式

}