webpack 全面解析（二）：学习 create-react-app 的 webpack 配置

2023-10-20 19:12:10

优化您的 Create-React-App 构建：深入探讨 Webpack 配置

简介

在上一篇文章中，我们探索了 webpack 的基础知识，并了解了如何配置 create-react-app。现在，我们将深入探讨 webpack 配置的更多高级功能，以优化您的构建过程，提升您的项目性能。

优化项目构建

默认情况下，create-react-app 使用 webpack 的生产模式进行构建，该模式对代码进行压缩和优化。虽然这在生产环境中至关重要，但在开发期间却会拖慢速度。我们可以通过使用 webpack 的开发模式来解决这个问题。

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "dev": "webpack-dev-server --open"
}

使用 npm run dev 运行此命令即可。

处理样式

create-react-app 默认使用 CSS 模块来管理样式。然而，有时我们需要使用传统的 CSS 文件。为此，我们可以修改 webpack 配置：

{
  "webpack": {
    "module": {
      "rules": [
        {
          "test": /\.css$/,
          "use": ["style-loader", "css-loader"]
        }
      ]
    }
  }
}

使用代码分离

代码分离将您的项目代码分成按需加载的模块。这可以减少初始加载时间，从而提高性能。

{
  "webpack": {
    "optimization": {
      "splitChunks": {
        "chunks": "all"
      }
    }
  }
}

设置代理

在开发过程中，我们经常需要访问后端 API。我们可以使用 webpack 的代理功能来实现：

{
  "proxy": {
    "/api": {
      "target": "http://localhost:8080",
      "pathRewrite": {"^/api" : ""}
    }
  }
}

处理多页面应用

对于具有多个页面的应用，我们可以使用 webpack 的多页面功能：

{
  "webpack": {
    "entry": {
      "home": "./src/pages/home/index.js",
      "about": "./src/pages/about/index.js"
    },
    "output": {
      "filename": "[name].js"
    }
  }
}