webpack学习四（babel）

babel-loader
安装

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

babel-loader是webpack与babel的通信桥梁，不会做把ES6转成ES5的工作，这部分工作需要用到@babel/preset-env来做
@babel/preset-env里包含了ES6|7|8转ES5的规则

babel ->分析依赖 ->AST抽象语法树 ->通过语法转换规则转化代码 ->生成代码

修改/src/index.js

const arr = [new Promise(() => {}), new Promise(() => {})];
arr.map(item => {
    console.log(item);
});

在webpack.config.js中新增配置

...

module.exports = {
    ...
    module: { // 处理模块
        rules: [
            ...
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    ...
};

打包运行（npm run test），查看main.js

img1

const转成了var，箭头函数转成了function

默认的babel只支持let等一些基础的特性转换，Promise等一些还没有转换过来，这时候就需要借助@babel/polyfill（ES新特性的完整库）

安装

npm i @babel/polyfill -D

在/src/index.js中导入

import '@babel/polyfill';

img2

main.js中新增了很多代码
我们只有Promise需要polyfill，main.js中新增了很多无用的代码，怎么办？
修改webpack.config.js中的配置

...
module.exports = {
    ...
    module: { // 处理模块
        rules: [
            ...
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    targets: { // 支持到浏览器指定的版本
                                        edge: '17',
                                        firefox: '60',
                                        chrome: '67',
                                        safari: '11.1'
                                    },
                                    corejs: 2 ,// 新版本需要指定核心库版本
                                    useBuiltIns: 'usage' // usage不需要再import哦
                                }
                            ]
                        ]
                    }
                }
            }
        ]
    },
    ...
};

删除掉/src/index.js中的

import '@babel/polyfill';

重新打包（npm run test）,我们看main.js

img3

文件就变小了哦，按需加载！

配置文件优化
将刚才我们新增在webpack.config.js中的部分移出到.babelrc（在项目根目录下新建此文件）

{
    presets: [
        [
            '@babel/preset-env',
            {
                targets: { // 支持到浏览器指定的版本
                    edge: '17',
                    firefox: '60',
                    chrome: '67',
                    safari: '11.1'
                },
                corejs: 2 ,// 新版本需要指定核心库版本
                useBuiltIns: 'usage' // usage不需要再import哦
            }
        ]
    ]
}

这样打包的效果是一样的，但webpack.config.js中的配置就不那么杂了

babel在执行编译的过程中，会从项目根目录下的.babelrc JSON文件中读取配置。没有该文件会从loader的options读取配置