{"id":26407347,"url":"https://github.com/jacob-lcs/react-webpack5-template","last_synced_at":"2025-10-25T12:03:55.852Z","repository":{"id":46047842,"uuid":"342894495","full_name":"jacob-lcs/react-webpack5-template","owner":"jacob-lcs","description":"webpack5 react 项目模板，支持 typescript，使用 SWC 编译，体验超快速度","archived":false,"fork":false,"pushed_at":"2025-04-14T12:16:30.000Z","size":926,"stargazers_count":188,"open_issues_count":5,"forks_count":12,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-12T19:13:13.621Z","etag":null,"topics":["lightningcss","react","react-compiler","swc","webpack"],"latest_commit_sha":null,"homepage":"https://react-webpack5-template.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jacob-lcs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-27T15:49:47.000Z","updated_at":"2025-03-26T11:22:57.000Z","dependencies_parsed_at":"2024-12-15T14:28:15.000Z","dependency_job_id":"5112daea-d15c-4ad9-9c03-f51c23f87f24","html_url":"https://github.com/jacob-lcs/react-webpack5-template","commit_stats":{"total_commits":40,"total_committers":4,"mean_commits":10.0,"dds":"0.44999999999999996","last_synced_commit":"6ce4d7c505badb4c2a308dc804ce1f77db7bddca"},"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacob-lcs%2Freact-webpack5-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacob-lcs%2Freact-webpack5-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacob-lcs%2Freact-webpack5-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacob-lcs%2Freact-webpack5-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jacob-lcs","download_url":"https://codeload.github.com/jacob-lcs/react-webpack5-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254518384,"owners_count":22084374,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lightningcss","react","react-compiler","swc","webpack"],"created_at":"2025-03-17T17:29:50.490Z","updated_at":"2025-10-25T12:03:50.809Z","avatar_url":"https://github.com/jacob-lcs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 从零开始使用 webpack5 搭建 react 项目\n\n\u003e 已集成功能\n\u003e - [x] cache 缓存提升热更新速度\n\u003e - [x] style module\n\u003e - [x] HMR\n\u003e - [x] lodash-es\n\u003e - [x] antd v5\n\u003e - [x] dayjs\n\u003e - [x] swc\n\u003e - [x] lightningcss\n\u003e \n\n\u003e 本文的示例项目源码可以点击 [这里](https://github.com/jacob-lcs/react-webpack5-template) 获取\n\n## 一、前言\n\nwebpack5 也已经发布一段时间了，其模块联邦、bundle 缓存等新特性值得在项目中进行使用。经过笔者在公司实际项目中的升级结果来看，其提升效果显著，热更新时间由原来的 8s 减少到了 2s，会极大的提升开发幸福感。除此之外，webpack5 也带来了更好的 tree shaking 算法，项目的打包体积也会进一步减少，提升用户体验。\n\n目前来看，create-react-app 脚手架还没有适配 webpack5，如果你想熟悉下如何从零开始配置 webpack5 项目的话，不妨跟着文档操作一下。\n\n## 二、项目初始化\n\n### 2.1 初始化文件结构\n\n首先创建一个文件夹，进行 npm 初始化\n\n```bash\nmkdir react-webpack5-template\ncd react-webpack5-template\n# npm 初始化配置\nnpm init -y\n# 创建 webpack 配置文件\ntouch webpack.common.js\n# 创建 babel 配置文件\nmkdir src \u0026\u0026 cd src\n# 创建入口文件\ntouch index.js\ncd .. \u0026\u0026 mkdir build\ntouch index.html\n```\n\n在上述步骤执行完毕之后，你的目录结构应该如下所示：\n\n```\n├── src\n│   └── index.js\n├── build\n│   └── index.html\n├── webpack.common.js\n├── .babelrc\n├── package.json\n```\n\n随后安装必要的依赖\n\n```bash\nnpm i webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader path -D\nnpm i react react-dom\n```\n\n### 2.2 完善配置文件\n\n文件结构生成完毕后，我们开始编写代码。首先，在`index.js` 中写入以下代码：\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nReactDOM.render(\n  \u003cReact.StrictMode\u003e\n    \u003cdiv\u003e你好，React-webpack5-template\u003c/div\u003e\n  \u003c/React.StrictMode\u003e,\n  document.getElementById('root')\n);\n```\n\n在` webpack.common.js` 中写入以下内容：\n\n```js\nconst path = require(\"path\");\nconst HtmlWebpackPlugin = require(\"html-webpack-plugin\");\n\nmodule.exports = (env) =\u003e {\n  return {\n    mode: \"development\",\n    entry: {\n      index: './src/index.js'\n    },\n    output: {\n      // 打包文件根目录\n      path: path.resolve(__dirname, \"dist/\"),\n    },\n    plugins: [\n      // 生成 index.html\n      new HtmlWebpackPlugin({\n        filename: \"index.html\",\n        template: \"./build/index.html\",\n      }),\n    ],\n    module: {\n      rules: [\n        {\n          test: /\\.(jsx|js)?$/,\n          use: [\"babel-loader\"],\n          include: path.resolve(__dirname, 'src'),\n        },\n      ]\n    },\n    devServer: {\n      port: 8080,\n      host: '0.0.0.0',\n    },\n  }\n}\n```\n\n在 `index.html` 中写入以下代码：\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eTitle\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n在 `.babalrc` 中写入以下代码：\n\n```json\n{\n  \"presets\": [\"@babel/preset-react\"]\n}\n```\n\n然后在 package.json 中添加如下 script：\n\n```diff\n\"scripts\": {\n  \"test\": \"echo \\\"Error: no test specified\\\" \u0026\u0026 exit 1\",\n+  \"dev\": \"webpack serve --config webpack.common.js\"\n},\n```\n\n随后我们运行 `npm run dev` 就可以直接运行了，由于我们上面设置的 devServer 端口号为 8080，所以在浏览器中打开 `localhost:8080` 即可看到如下效果：\n\n![image-20210228004846012](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8d2c643391e04c319548827e4adef444~tplv-k3u1fbpfcp-zoom-1.image)\n\n到这里位置，我们的初步搭建已经完成了，但是我们在现有的项目中看到的 webpack 配置文件不止这些，有 less、css 文件的解析，image 等资源文件的处理，还有一些优化项的配置等，接下来会一一介绍。\n\n## 三、功能性配置\n\n上面我们已经做到可以将一个简单的 React 项目运行起来了，接下来我们要做的是加一些功能。\n\n### 3.1 样式文件解析\n\n在前端项目开发过程中，比较经常使用的是 css、less、scss、sass、stylus，下面我们就先仅对 less 进行配置，其余的样式文件可参考 GitHub 源码。首先安装 loader：\n\n```bash\nnpm i style-loader less-loader less css-loader postcss-loader postcss-normalize autoprefixer postcss-preset-env -D\n```\n\n首先，在 webpack.common.js 顶部加入以下正则表达式，用来判断样式文件：\n\n```js\n// less/less module 正则表达式\nconst lessRegex = /\\.less$/;\nconst lessModuleRegex = /\\.module\\.less$/;\n```\n\n然后在 webpack.common.js 中加入以下配置：\n\n```js\nmodule: {\n\trules: [\n    {\n      test: lessRegex,\n      use: [\"style-loader\", \"css-loader\", \"postcss-loader\", \"less-loader\"],\n      sideEffects: true,\n    },\n  ]\n}\n```\n\n新增 postcss.config.js 文件并配置：\n\n```js\nconst postcssNormalize = require('postcss-normalize');\n\nmodule.exports = {\n  plugins: [\n    [\n      \"postcss-preset-env\",\n      {\n        autoprefixer: {\n          flexbox: \"no-2009\",\n        },\n        stage: 3,\n      }\n    ],\n    postcssNormalize(),\n    require('autoprefixer') ({\n      overrideBrowserslist: ['last 2 version', '\u003e1%', 'ios 7']\n    })\n  ],\n};\n```\n\n\n\n然后我们在 src 目录下新建 index.less 文件，测试配置是否成功：\n\n```less\n// index.less\n.title {\n  text-align: center;\n  color: coral;\n}\n```\n\n重新运行项目后发现样式生效，配置成功。\n\n![image-20210228102928287](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/134d33f3528d497d992855178aebce39~tplv-k3u1fbpfcp-zoom-1.image)\n\n但是仅配置 less 是不够的，我们日常在开发过程中经常用到 less module，在这里我们进行如下配置，首先安装 `react-dev-utils`：\n\n```bash\nnpm i react-dev-utils resolve-url-loader -D\n```\n\n在 webpack.common.js 中进行如下配置：\n\n```diff\nconst getCSSModuleLocalIdent = require(\"react-dev-utils/getCSSModuleLocalIdent\");\n\nmodule: {\n\trules: [\n    {\n      test: lessRegex,\n+     exclude: lessModuleRegex,\n      use: [\"style-loader\", \"css-loader\", \"postcss-loader\", \"less-loader\"],\n      sideEffects: true,\n    },\n+   {\n+     test: lessModuleRegex,\n+     use: [\n+       \"style-loader\",\n+       {\n+         loader: \"css-loader\",\n+         options: {\n+           modules: {\n+             getLocalIdent: getCSSModuleLocalIdent,\n+           }\n+         }\n+       },\n+       \"postcss-loader\",\n+       \"less-loader\"\n+     ],\n+   }\n  ]\n}\n```\n\n接下来我们新建 index.module.less 来进行测试：\n\n```less\n.font {\n  color: red;\n}\n```\n\n重新运行项目后样式生效，并且 className 也发生了相应变化：\n\n![image-20210228110624352](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/46a4750428ee451189eba42e090fe1cd~tplv-k3u1fbpfcp-zoom-1.image)\n\nCSS、SCSS 与 SASS 的配置都大同小异，大家可以移步到我的 [GitHub](https://github.com/jacob-lcs/react-webpack5-template)。\n\n### 3.2 图片地址解析\n\n\u003e 资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。\n\u003e\n\u003e 在 webpack 5 之前，通常使用：\n\u003e\n\u003e - [`raw-loader`](https://webpack.docschina.org/loaders/raw-loader/) 将文件导入为字符串\n\u003e - [`url-loader`](https://webpack.docschina.org/loaders/url-loader/) 将文件作为 data URI 内联到 bundle 中\n\u003e - [`file-loader`](https://webpack.docschina.org/loaders/file-loader/) 将文件发送到输出目录\n\u003e\n\u003e 资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：\n\u003e\n\u003e - `asset/resource` 发送一个单独的文件并导出 URL。之前通过使用 `file-loader` 实现。\n\u003e - `asset/inline` 导出一个资源的 data URI。之前通过使用 `url-loader` 实现。\n\u003e - `asset/source` 导出资源的源代码。之前通过使用 `raw-loader` 实现。\n\u003e - `asset` 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 `url-loader`，并且配置资源体积限制实现。\n\u003e\n\u003e —— 引自 webpack5 中文文档\n\nwebpack5 内置 assets 类型，我们不需要额外安装插件就可以进行图片等资源文件的解析，配置如下：\n\n```javascript\n{\n  test: /\\.(jpe?g|png|gif|svg|woff|woff2|eot|ttf|otf)$/i,\n  type: \"asset/resource\"\n},\n```\n\n如此我们便可以处理引入的图片资源文件，可以根据自身需要进行拓展。\n\n## 四、性能优化\n\n### 4. 1 引入缓存\n\n前面提到，webpack5 引入了缓存来提高二次构建速度，我们只需要在 webpack 配置文件中加入如下代码即可开心缓存\n\n```js\ncache: {\n  type: 'filesystem',\n  // 可选配置\n  buildDependencies: {\n    config: [__filename],  // 当构建依赖的config文件（通过 require 依赖）内容发生变化时，缓存失效\n  },\n  name: 'development-cache',\n},\n```\n\n重新运行项目后会发现 node_modules 目录下会新增一个 .cache 文件夹：\n\n![image-20210228114440107](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/96572954a479431b8ab2051f8b46d98b~tplv-k3u1fbpfcp-zoom-1.image)\n\n笔者在实际项目中测试，热更新时间由原来的 8s 缩短到 2s 可以说是提升巨大。\n\n#### 4.2 引入多线程\n为了提升构建速度，我们可以引入 `thread-loader` 提升构建速度，首先我们需要安装：\n```bash\nnpm i thread-loader -D\n```\n然后在 `webpack.common.js` 中进行配置：\n```diff\n{\n  test: /\\.(jsx|js)?$/,\n- use: [\"babel-loader\"],\n+ use: [\"thread-loader\", \"babel-loader\"],\n  include: path.resolve(__dirname, 'src'),\n},\n```      \n\n## 五、总结\n\n到目前为止，配置工作算是已经完成了，本篇文章只是指导大家进行一些初始化配置，项目中肯定还有很多可以优化的地方，比如说分别配置 webpack.dev.js 以及 webpack.prod.js 以通过测试环境与正式环境的不同需求，在这里就不细说，环境区分的相关配置我会上传到 GitHub 中，如果你觉得项目对你有点用处的话，还请点个 star。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacob-lcs%2Freact-webpack5-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjacob-lcs%2Freact-webpack5-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacob-lcs%2Freact-webpack5-template/lists"}