第五十六篇：webpack的loader(四) -打包js中的高级语法

好家伙，

1.打包处理js文件中的高级语法

webpack只能打包处理一部分高级的JavaScript 语法。对于那些webpack无法处理的高级js 语法，需要借

助于 babel-loader 进行打包处理。

例如 webpack无法处理下面的JavaScript代码：

 // 1.定义了名为 info 的装饰器
   function info(target) {
 // 2.为目标添加静态属性 info
   target.info = 'Person info'
}

// 3.为Person 类应用 info 装饰器
@info
class Person {}

 //4.打印 Person 的静态属性 info
 console.log(Person.info)

此处运用到了一个名为装饰器的高级语法，webpack无法对其进行打包，

（基于干不过就叫人的思想）这里我们借助于 babel-loader 进行打包处理。

（babel是一个插件  => babel是webpack的插件 => 所以babel是插件的插件）

2.babel-loader的安装和配置

2.1 安装 babel-loader 相关的包

运行如下的命令安装对应的依赖包：

npm i babel-loader@8.2.2 @babel/core@7.14.6@babel/plugin-proposal-decorators@7.14.5-D

在webpack.config.js的 module -> rules 数组中，添加 loader 规则如下:

 // 注意：必须使用 exclude 指定排除项；因为 node_modules 目录下的第三方包不需要被打包
 { test: /\.jss/, use: 'babel-loader', exclude: /node_modules/ }

2.2配置 babel-loader

在项目根目录下，创建名为babel.config.js的配置文件(与webpack有个webpack.config.js配置文件一样)，定义Babel的配置项如下：

module.exports={
// 声明 babel 可用的插件
// 将来 ,webpack 在调用 babel-loader的时候,会优先加载plugins插件来使用
plugins: [['@babel/plugin-proposal-decorators',{ legacy: true }]]

}

插件的的可选配置项,

可以直接上官网文档去找Babel 中文文档 · 下一代 JavaScript 编译器 (docschina.org)

webpack的配置是较难的,一般平时就直接用第三方的默认配置了,

这里是浅显的了解一下webpack的原理

That's all