webpack使用babel-loader编译ES新特性

一、安装babel-loader以及配置

yarn add babel-loader @babel/core @babel-preset-env --dev

webpack.config.js配置

module.exports = {
    mode:"none",// 三种工作模式: none | production | development
    entry:"./src/index.js", // 指定打包入口文件的路径,注意,如果这里的路径是相对路径, ./是不能省略的
    output:{ // 通过output属性设置输出文件位置,output的值要求是一个对象
        filename:"bundle.js", // 通过filename指定输出文件名称
        path:path.join(__dirname, "dist") // 通过path属性指定输出文件的目录,需要输入一个绝对路径
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                use:[
                    {
                        loader:"babel-loader",
                        options:{
                            presets:['@babel/preset-env']
                        }
                    }
                ]
            }
        ]
    }
}

二、测试效果

index.js文件内容如下：

const fn = () => {
    const a = `变量a`
    const str = `this is ${a}`
    const { log } = console
    log(str);
}

打包结果bundle.js内容如下：

var fn = function fn() {
  var a = "\u53D8\u91CFa";
  var str = "this is ".concat(a);
  var _console = console,
      log = _console.log;
  log(str);
};

可见，我们使用了ES新特性的代码被成功编译转换了，但是，webpack打包后的bundle.js中会将我们的代码分成一个个模块放在一个自执行函数中的__webpack_modules__数组中，最后通过__webpack_require__方法去将每一个模块加载。这个自执行函数内部一些方法都是通过箭头函数定义的，目前没找到转换方法。由于代码较多此处省略了，有兴趣的读者可以自己去查看。

小技巧：在VScode中可以通过ctrl+k，ctrl+0整理代码格式，方便阅读。