跳出默认配置，灵活掌控 webpack：React 08 中的进阶之旅

2023-11-02 07:40:43

前言

使用 create-react-app 创建 React 项目时，默认情况下您无法控制 Webpack 的配置。然而，在某些情况下，您可能需要调整 Webpack 设置以满足特定需求。本文旨在指导您逐步了解如何在 React 08 中覆盖 Webpack 配置，让您掌控构建过程。

打破默认配置

create-react-app 旨在简化 React 项目的设置，但它也隐藏了对 Webpack 的直接访问。为了获得高级定制能力，我们需要覆盖默认配置。这可以通过修改项目根目录中的 webpack.config.js 文件来实现。

逐步覆盖 Webpack 配置

添加 webpack.config.js 文件： 在项目根目录中创建一个名为 webpack.config.js 的文件。
配置扩展： 在 webpack.config.js 文件中，添加一个 extend 属性，指向默认的 create-react-app Webpack 配置：

const { webpack } = require("webpack");
const { extendDefaultConfig } = require("create-react-app/webpack.config.js");

module.exports = extendDefaultConfig({
  // 您的自定义配置在此
});

自定义配置： 现在，您可以根据需要添加自定义配置到 extendDefaultConfig 函数中。例如，要添加一个自定义加载器：

module.exports = extendDefaultConfig({
  module: {
    rules: [
      {
        test: /\.my-custom-extension$/,
        use: [
          {
            loader: "custom-loader",
            options: {
              // 您的自定义加载器选项
            },
          },
        ],
      },
    ],
  },
});