webpack 转换 ES6高级语法 bable插件 module rules

Posted 2021-01-21 煮一杯开水

// 在webpack中只能处理一部分es6语法 一些高级的ES6或者ES7 webpack处理不了 借助第三方loader处理 会将结果打包到main.js

// loader 通过Bable可以转换

// webpack中运行 如下两套命令 去安装bable功能

// 1，cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

// 2, cnpm i babel-preset-env babel-preset-stage-0 -D

/* 2, 打开webpack 配置文件 ，在module节点下的rules数组中 添加一个新的匹配规则：

{test:/.js$/,use:‘babel-loader‘,exclude:/node_modules/}

在配置bable属性规则时候 必须把node_modules通过exclude排除调（不排除的话 会把文件夹中所有js文件都打包编译 无法正常运行）

3,在项目的根目录中 新建一个.babelrc 的babel配置文件 属于json 字符串必须使用双引号

在babelrc写如下设置

*/

/* {

"presets":["env","stage-0"],

"plugins":["transform-runtime"]

} */