详解用Webpack与Babel配置ES6开发环境

引言

Webpack 和 Babel 都是现代前端工程开发中不可或缺的工具。Webpack 可以对项目进行打包，并提供丰富的 loader 和 plugin，而 Babel 则可以将 ES6 以上版本的代码转换为可以在各种浏览器中运行的 ES5 代码。本文将详细介绍如何通过 Webpack 和 Babel 配置 ES6 开发环境。

步骤

1. 安装Webpack和Babel

使用以下命令安装 Webpack 和 Babel:

npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env --save-dev

其中，webpack 和 webpack-cli 是 Webpack 的核心依赖，babel-loader 是 Webpack 的 loader，@babel/core 和 @babel/preset-env 则是 Babel 的核心依赖。

2. 配置Webpack

在项目根目录下创建一个 webpack.config.js 文件，并添加以下代码：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },

  plugins: [
    new webpack.ProgressPlugin(),
  ],
};

上述代码中，我们首先引入了 path 和 webpack，并将它们导出为一个配置对象。该配置对象中，我们指定了项目入口文件为 ./src/index.js，输出文件为 bundle.js，并且将打包后的文件输出到 dist 目录下。在 module.rules 中，我们添加了一个 babel-loader 的配置，用于将 ES6+ 代码转换为可执行的 ES5 代码。

3. 配置Babel

在项目根目录下创建一个 .babelrc 文件，并添加以下代码：

{
  "presets": [
    "@babel/preset-env"
  ]
}

上述代码中，我们使用了 @babel/preset-env，它可以根据项目中使用的 ECMAScript 版本和目标浏览器的版本自动提供所需的 polyfill 和转换。

4. 编写示例代码

在 ./src/index.js 中添加 ES6 代码，示例如下：

const arr = [1, 2, 3];
const arr2 = arr.map(item => item * 2);
console.log(arr2);

5. 打包项目

使用以下命令打包项目：

npx webpack

在打包成功后，会在项目根目录下生成 dist/bundle.js 文件。此时，我们可以使用 script 标签引入 bundle.js 文件，或者使用其他方式将它加载到浏览器中运行。

示例

为了更好地说明上述步骤，以下为两个示例说明。

示例一

在项目根目录下创建一个 package.json 文件，并添加以下内容：

{
  "name": "example-1",
  "version": "1.0.0",
  "description": "Webpack and Babel example",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "babel-loader": "^8.2.2",
    "webpack": "^5.50.0",
    "webpack-cli": "^4.7.2"
  }
}

在项目根目录下创建一个 src/index.js 文件，并添加以下内容：

const arr = [1, 2, 3];
const arr2 = arr.map(item => item * 2);
console.log(arr2);

在项目根目录下创建一个 .babelrc 文件，并添加以下内容：

{
  "presets": [
    "@babel/preset-env"
  ]
}

在项目根目录下创建一个 webpack.config.js 文件，并添加以下内容：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },

  plugins: [
    new webpack.ProgressPlugin(),
  ],
};

使用以下命令打包项目：

npm run build

在项目根目录下会生成一个 dist/bundle.js 文件，该文件包含了转换后的 ES5 代码。

示例二

在项目根目录下创建一个 package.json 文件，并添加以下内容：

{
  "name": "example-2",
  "version": "1.0.0",
  "description": "Webpack and Babel example",
  "main": "index.js",
  "scripts": {
    "build": "webpack-dev-server",
    "start": "webpack serve --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "babel-loader": "^8.2.2",
    "webpack": "^5.50.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^4.0.0",
    "html-webpack-plugin": "^5.4.0"
  }
}

在项目根目录下创建一个 src/index.js 文件，并添加以下内容：

const title = 'Hello, World!';
document.write(`<h1>${title}</h1>`);

在项目根目录下创建一个 .babelrc 文件，并添加以下内容：

{
  "presets": [
    "@babel/preset-env"
  ]
}

在项目根目录下创建一个 webpack.config.js 文件，并添加以下内容：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack and Babel example',
    }),
    new webpack.ProgressPlugin(),
  ],

  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

使用以下命令启动开发服务器：

npm start

在浏览器中访问 http://localhost:9000，即可看到 Hello, World! 的标题。可以在 ./src/index.js 中修改代码，并实时查看修改后的效果。