如何在 Webpack 中配置 Babel 来编译 React 代码？

在现代的前端开发中，React 已经成为了一个非常流行的 JavaScript 库。然而，React 的代码需要通过 Babel 进行编译才能在各种浏览器中得到正确的运行。在 Webpack 中配置 Babel，可以帮助我们轻松地编译 React 代码，并让我们的项目更加容易维护和拓展。下面我们来一步步讲解如何在 Webpack 中完成配置。

配置 Babel

首先我们需要安装必要的依赖：

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

• babel-core：Babel 的核心代码
• babel-preset-es2015：用于编译 ES6 代码
• babel-preset-react：用于编译 React 代码

在安装完成依赖后，我们需要在 Webpack 配置文件中添加 loader 配置：

// www.javascriptcn.com code example
module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015', 'react']
          }
        }
      }
    ]
  }
};

以上代码中，我们使用了 Babel 的 loader：babel-loader，通过设置它的 options 配置，可以指定需要使用的 Babel 插件。

其中，我们把需要使用的插件都集中到了一个数组中，通过配置 options.presets 指定加载的插件。注意，这里我们需要加载两个插件：es2015 和 react。

配置 Webpack

现在我们配置好了 Babel，也让 Webpack 知道了需要使用 Babel 处理项目中的 JavaScript 代码。然而，我们需要对 Webpack 进行一些额外的配置，以确保 Babel 正确地编译 React 代码。

首先，我们需要安装 react 和 react-dom 依赖：

npm install react react-dom --save

在安装完依赖后，我们需要在 webpack.config.js 文件中添加以下代码：

// www.javascriptcn.com code example
module.exports = {
  ...
  resolve: {
    alias: {
      'react': 'react/dist/react.js',
      'react-dom': 'react-dom/dist/react-dom.js'
    }
  }
};

这里，我们通过 Resolve 属性来指定 React 和 ReactDOM 的路径，以便 Babel 编译正确的代码。

最终，我们需要在 Webpack 配置文件中指定入口文件和出口文件：

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  ...
};

现在，我们已经完成了 Webpack 的配置，也成功地让 Babel 编译 React 代码了。

示例代码

最后，我们提供一份完整的示例代码，来帮助大家更好地理解以上配置方法：

// www.javascriptcn.com code example
// webpack.config.js
var 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',
          options: {
            presets: ['es2015', 'react']
          }
        }
      }
    ]
  },
  resolve: {
    alias: {
      'react': 'react/dist/react.js',
      'react-dom': 'react-dom/dist/react-dom.js'
    }
  }
};

// www.javascriptcn.com code example
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello World!</h1>
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

以上便是我们如何在 Webpack 中配置 Babel 来编译 React 代码的详细步骤与示例。希望能对大家有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cfe3e7e46428fe9ec239d1