webpack4环境搭建-编译ES6

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"
  },

到此项目已经可以编译es6的js模块了