Webpack4 如何支持 ES6 的 import/ export ？

在 Webpack 4 中支持 ES6 的 import 和 export 语法的方式是通过使用 Babel。Babel 是一个广泛使用的转译器，可以将 ES6 代码转换为向后兼容的 JavaScript 版本，以便在当前和旧版浏览器中运行。下面是整个配置过程的步骤：

1. 初始化 npm 项目

首先，您需要初始化一个新的 npm 项目（如果还没有的话）:

bash
npm init -y

2. 安装 Webpack 和 Babel

接下来，安装 Webpack 及其 CLI 工具，同时安装 Babel 相关的包：

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

这里的包含义如下：

• webpack 是核心包。
• webpack-cli 允许我们通过命令行使用 webpack。
• babel-loader 是 webpack 的一个 loader，用于让 webpack 使用 Babel。
• @babel/core 是 Babel 的核心功能。
• @babel/preset-env 是一个智能预设，允许您使用最新的 JavaScript，而不需要微管理浏览器兼容问题。

3. 配置 Babel

在项目根目录下创建一个名为 .babelrc 的 Babel 配置文件，并添加以下内容：

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

这个配置告诉 Babel 使用 @babel/preset-env，它会根据您的目标浏览器自动决定需要转换的 JavaScript 特性。

4. 配置 Webpack

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

javascript
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

这个配置定义了入口文件 index.js 和输出文件 bundle.js。它还设置了一个规则，用于处理 .js 文件，确保它们通过 babel-loader 进行转换。

5. 创建入口文件

在 src/index.js 文件中，可以使用 ES6 的模块语法，例如：

javascript
// ES6 Module syntax
export function multiply(x, y) {
  return x * y;
}

import { multiply } from './math';
console.log(multiply(5, 2));  // 输出 10

6. 构建项目

最后，您可以使用以下命令来构建项目：

bash
npx webpack

这将处理您的 JavaScript 文件，并输出到 dist/bundle.js，现在这个文件已经是转换后兼容大多数浏览器的 JavaScript 代码了。

通过以上步骤，Webpack 4 就可以很好地支持 ES6 的 import/export 语法了。这种设置确保了代码的现代性和向后兼容性。