webpack搭建简单vue项目 第 4.0 章 -- webpack + Babel 构建 ES6 开发平台

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」                ，赢取创作大礼包，挑战创作激励金

前言

话接上一章，本章我们要开始引入 es6啦！

es6+bable:

他来了他来了，webpack带着ES6来了，要用ES6就要我们的神器Bable了 既然要将 webpack 和 Babel 结合在一起，就需要在两者之间建立一条纽带，而通过 webpack 的 loaders 就可以生成这条纽带，现在让我们修改我们的 webpack.config.js 配置文件： 在此之前，先安装 babel-core 包：

npm install -g babel-cli
npm i -D @babel/core
npm i @babel/preset-env

webpack.config

module.exports = {
  /* webpack 入口起点*/
  entry: "./index.js",

  /* webpack 输出*/
  output: {
    //输出文件名
    filename: "./test.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
  mode: "development",
};

可以看到我们在这里加了一段 module.rules 配置项，rules 数组里的每一项就是一条 loader 使用规则，loader 用于对不同类型文件的源代码进行转换，可以使你在 import 或"加载"模块时预处理文件。

  现在我们配置的第一条规则，就是针对以 .js 结尾的文件使用 babel-loader。

现在我们已经准备好了 webpack、webpack 和 Babel 的纽带，接下来就需要准备 Babel 的相关配置了。

  在 webpack 中一般情况下我们不会主动调用 babel-core 解析 ES6 代码，而是通过 babel-loader 在 webpack 编译过程中自动解析 ES6 代码。那么现在的问题就是 preset 又应该在哪里配置？

  这里我们有两种方式可以实现上述配置：

1. 使用 Babel 提供的方法：通过 Babel 目录下的 .babelrc 配置文件完成配置（直接创建 .babelrc 文件可能会有命名规范的问题，可以通过 VS Code、Sublime 等编辑器创建该文件）。这里的 .babelrc 就类似于 webpack.config.js 的作用，只是 .babelrc 文件是在 babel-loader 执行的过程中使用的。

.babelrc

2. 使用 webpack 提供的方法：在 webpack.config.js 的 module.rules 规则中，我们还可以通过使用 loader 语法配置 Babel 的 presets：

webpack.config.js

然后让我们配置一下index.js 试试看效果

没毛病，本章结束