webpack打包js文件，兼容处理ES6、ES7等语法

最新推荐文章于 2024-11-10 10:45:00 发布

原创最新推荐文章于 2024-11-10 10:45:00 发布 · 2.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端 #javascript

本文详细介绍了使用Webpack和Babel进行不同级别的JavaScript兼容性处理的方法，包括基本处理、全面处理和推荐的按需加载方式，旨在帮助开发者选择最合适的配置方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

推荐使用方法 ③ :

方法 ① ： (处理基本的js兼容,缺点:对于promise等无法处理) 所需的插件: babel-loader @babel/preset-env @babel/core

/**
 * webpack配置文件
 * webpack.config.js
 * */
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    //  打包入口
    entry: './src/js/index.js',
    //  打包路径
    output: {
        filename: "js/bundle.js",
        path: path.resolve(__dirname,'build')
    },
    module: {
        rules: [
            /**
             * 定义打包规则：其中所需的插件有 babel-loader @babel/preset-env @babel/core
             */

            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    //  预设babel做怎样的兼容性处理
                    presets: ['@babel/preset-env']
                }
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    mode: "production"
}

方法 ② ：(处理全部的js兼容性处理，缺点: 全部都进行处理，体积过大) 使用的插件: @babel/polyfill （babel-loader @babel/preset-env @babel/core）
（ps：配置与方法 ① 一样，只需在入口文件(如:index.js)引入即可）

//  只需在入口文件引入下面即可
import '@babel/polyfill'

//  下面可忽略
const add = (x, y) => {
    return x + y
}

console.log(add(3, 5))

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

方法 ③ (推荐) ：(按需加载,体积不会过大，并且仅仅对需要处理的js进行处理) 使用的插件: core-js （babel-loader @babel/preset-env @babel/core）

/**
 * webpack配置文件
 * webpack.config.js
 * */
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    //  入口文件
    entry: './src/js/index.js',
    //  打包路径
    output: {
        filename: "js/bundle.js",
        path: path.resolve(__dirname,'build')
    },
    module: {
        rules: [
            
            {
                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: '50',
                                    edge: '17'
                                }
                            }
                        ]
                    ]
                }
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    mode: "development"
}