babel 7 于 2018 年 8 月份发布,在 babel 7 中,所有官方包更名为以 @babel 为开头,并且 babel 7 推荐使用 babel.config.js 来配置 babel 。这里我统一安装最新的版本,如果出现了错误,可以查看是不是babel 版本问题。
(一)相关介绍
1、babel-loader: 负责 es6 语法转化
2、@babel/preset-env: 包含 es6、7 等版本的语法转化规则
3、@babel/polyfills: es6 内置方法和函数转化垫片,用来实现所有新的javascript功能,比如 Promise ,,Array.prototype.includes 等
安装相关依赖包@babel系列,webpack4
安装@babel 相关
npm install --save-dev @babel/core @babel/preset-env npm install --save @babel/polyfill //(注意没有-dev )
安装webpack 相关
npm install --save-dev babel-loader
(二)webpack中使用babel
在根目录创建.babelrc文件,里面写下如下代码:
{ "presets": [ "@babel/preset-env" ] }
在根目录创建webpack.config.js文件,里面代码如下:
module.exports = { entry: { app: "./src/main.js" }, output: { filename: "bundle.js" }, module: { rules: [ { test: /\.js$/, exclude: /(node_modules)/, use: { loader: "babel-loader" } } ] } };
这里需要注意项目入口并不是./src/index.js,而是./src/main.js,所以我们必须在项目里创建src目录,并在src目录里创建main.js
当然了我们的packjson.js文件修改如下
"scripts": { "dev": "webpack --mode development --config webpack.config.js" },