代码目录结构：
基本目录结构
### babel 转译es6 -> es5
- 安装babel
- npm install babel-core --save-dev （用babel 就要用babel的核心包 core是必须要安的）
- npm install babel-loader --save-dev （loader是基于core的 是用来解析语法的 翻译官）
### babel-preser-es2015
- 让翻译官 loader 拥有解析es6语法的功能 再安装这个插件 loader才具备解析的能力
- npm install babel-preset-es2015 --save-dev
- 模块的解析规则 js 匹配出所有的js 不包括node_modules
- 具体操作 babel转译步骤：
- 1. npm install babel-core --save-dev npm install babel-loader --save-dev npm install babel-preset-es2015 去安装这三个包 记住顺序
- 2. 在webpack.config.js 中配置 babel的规则 大体规则如下 匹配出所有的js 不包括node_modules里的 进行转译
- 3. 我们还需要再根目录下创建一个 .babelrc 的文件
```
// .babelrc 文件告诉 loader 具备什么样的能力 这么一些 好的 loader你既然知道了es2015 那接下来就全靠你啦！
{
"presets": ["es2015"]
}
```
- 4. 我们在webpack.config.js中 新增了一个 module对象 rules数组 来给babel制定一个规则 不是啥js都转译吧 node_modules里辣么多js 我们只想要我们想要的文件转译 举例 我要转译src 源码文件里的js后缀文件 如下操作：
```
//webpack.config.js
let path=require('path');
module.exports={
entry:"./src/main.js",
output:{
filename:"bundl.js",
path:path.resolve('./dist)
},
module:{
rules:[
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
]
}
}
```
- 5. 我们进入文件目录下 npm run build 就可以了 值得注意的是 有时候build命令时 会出现报错 类似什么webpack找不到 babel-loader版本问题等 不要慌 根据提示重新 npm install 一下即可。
ps：如果 对于webpack 有点懵逼的 可以看上一篇 虽然很肤浅的使用 但是起码知道了webpack 到底时啥玩意 干了些啥吧 去了解了解。
网友评论