Webpack5 中使用 label-loader

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第22天，点击查看活动详情

为什么需要 babel-loader

我们来做个实验，修改 /src/hello.js 文件：

function getstring(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('Hello Webpack~~~~')
        },2000)
    })
}


async function hello(){
    let str = await getstring()
    console.log(string)
}
//导出 函数模块
export default hello

执行 npx webpack 编译之后，可以看到 bundle.js 文件生成 JS 代码如下：

// /dist/bundle.js
//...
// export default hello


function getstring(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('Hello Webpack~~~~')
        },2000)
    })
}


async function hello(){
    let str = await getstring()
    console.log(string)
}

启动服务之后，两秒后正常输出 Hello Webpack~~~，说明浏览器能够运行我们的ES6代码。但如果浏览器版本过低，就很难保证 JS 代码正常运行了。

回到 bundle.js 文件中，发现这个文件中 JS 中的代码没有做任何转译，直接将 hello.js 文件中代码直接输出到 bundle.js 文件中。

如果浏览器一旦不支持 ES6 代码，该怎么办呢？

Webpack 自身可以自动加载 JS 文件，就像加载 JSON 文件一样，无需任何 loader。可是，加载的JS 文件会原样输出，即使你的JS文件里包含 ES6+ 的代码，也不会做任何的转译，这时我们就需要借助 Babel 来帮忙完成转译。

Babel 是一个 JavaScript 编译器，可以将 ES6+ 代码转译成向后兼容，能直接在旧版 JavaScript 引擎运行的低版本代码。

我们知道 Webpack 天生可以自带加载 JS 模块的功能。但是它只能做 JS 模块化的打包，并不能转化 JS 里的代码，比如 S6 转化成 ES5。

那有时候我们的代码还能正常运行，那纯靠浏览器来解析，如果浏览器的版本比较低的话，那运行的时候，可能会发生错误，因此我们在写代码的时候，需要转化的，这个转换的工具是 Babel。Babel 和 Webpack 整合，需要使用 babel-loader。