14.webpack4处理js兼容性问题及js压缩——babel

风落不归处

已于 2024-03-25 15:59:57 修改

阅读量580

点赞数 1

分类专栏： webpack4 文章标签： webpack

于 2022-08-28 12:15:52 首次发布

本文链接：https://blog.csdn.net/weixin_43893483/article/details/126568140

版权

webpack4 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1.执行步骤

1）创建相关文件

2）下载js兼容相关依赖

babel@6.23.0、babel-loader@8.0.6、babel/preset-env@7.8.4、@babel/polyfill@7.8.3、@core-js@3.6.4

2.代码段

1）webpack.config.js 使用babel-loader、@babel/preset-env做基本js兼容性处理

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

    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname,'build')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    //预设：基本js兼容性处理
                    presets: ['@babel-preset-env']
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development'
}

使用基本兼容性处理，只能转换基本语法，如：Promise语法就不能转换

2）webpack.config.js 使用babel-loader、@babel/preset-env、@babel/polyfill做全部js兼容性处理

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

    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname,'build')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    //预设：基本js兼容性处理
                    presets: ['@babel-preset-env']
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development'
}

再在入口文件index.js中增加：import '@babel/polyfill 语句就行了

3）webpack.config.js 使用babel-loader、@babel/preset-env、core-js依赖做部分js兼容性问题

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

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname,'build')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    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'
        })
    ],
    mode: 'development'
}

4）index.js

// 直接引用就可以了，处理全部的兼容性
// import "@babel/polyfill"

const add = (x, y) => x + y;
console.log(add(2, 5));


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

console.log(promise)

5）index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>hello webpack</h2>
</body>
</html>

总结：

①可以下载并使用babel、babel-loader、@babel/preset-env做基本js兼容处理

②可以下载并使用babel、babel-loader、@babel/preset-env、@babel/polyfill做全部js兼容处理

③可以下载并使用babel、babel-loader、@babel/preset-env、core-js做部分兼容性处理

js压缩只许将mode改为production就行