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整理代码格式,方便阅读。