众所周知webpack打包能够处理一些高级的ES语法,比如我们使用了ES6中的import,那么我们只需要打包这个.js文件,然后运行就行了,但是这么做有一个缺点,不能够解析更高级的语法,只能解析ES6低级的语法,例如class static语法糖是不会被解析的。
我们可以在webpack中使用Babel来解决这个问题。
1、babel是什么?
babel是一个JavaScript的编译器,https://www.babeljs.cn/
2、babel的作用?
babel能够将高级的JavaScript语法转化成低级的JavaScript语法,例如将ES6/7转化成ES5/4等。
3、babel如何使用?
在这里只研究babel在webpack下的使用方式
3.1、安装
babel的安装,需要的包比较多,有两套包需要安装。
-
babel的第三方装载器:babel-core babel-loader babel-plugin-transform-runtime
cnpm babel-core babel-loader babel-plugin-transform-runtime -D
-
babel的语法识别器:babel-preset-env babel-preset-stage-0
cnpm babel-preset-env babel-preset-stage-0 -D
3.2、配置
3.2.1、webpack.config.js设置
既然要用到第三方加载器,那么就需要到webpack.config.js下的modules下的rules下编写相关的文件匹配规则:
{test:/.\js$/,use:'babel-loader',exclude:/node_modules/}
test----匹配.js的文件(高级别的文件)
use---使用的第三方加载器
exclude---不自动匹配node_modules文件
const path=require('path');
const htmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
entry:path.join(__dirname,'./src/main.js'),
output:{
path:path.join(__dirname,'./dist'),
filename:'bundle.js'
},
plugins:[
new htmlWebpackPlugin({
template:path.join(__dirname,'src/index.html'),
filename:'index.html'
})
],
module: {
rules: [
{test:/\.css$/,use:['style-loader','css-loader']}, //css匹配规则
{test:/\.png$/,use:'url-loader'}, //url匹配规则
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/} //.js 使用babel匹配的规则
//test---匹配.js文件 use---匹配器 exclude:/.../---不匹配这里面的文件
]
}
};
3.2.2 创建.babelrc文件
在项目的根目录下创建一个.babelrc文件,使用的是json格式。
{
"presets":["env","stage-0"],
"plugins":["transform-runtime"]
}
其中presets中的值是,使用的语法加载器,plugins的值是使用的babel插件,我们在上面安装的那两个包就使用到了。
3.3、使用
正常运行项目之后,webpack会使用babel去识别.js的文件并处理,处理完成后的结果交给webpack打包后使用。
注意!!!我们在安装babel-loader要安装7.x版本的,默认安装的话是最新版8.x版本,使用的话会出错
cnpm i babel-loader@7.1.2 -D