前端进阶（九）webpack4+react-app-rewired2.x实战

最新推荐文章于 2025-11-18 02:04:31 发布

原创

最新推荐文章于 2025-11-18 02:04:31 发布 · 8.8k 阅读

5 ·

CC 4.0 BY-SA版权

本文介绍了如何使用webpack4和react-app-rewired简化配置，包括安装、基本用法、遇到的问题及解决办法，以及通过customize-cra进行高级定制。详细讲解了如何添加Babel插件、配置别名、调整Webpack resolve等，适用于React项目的构建优化。

webpack4和webpack3区别还是比较大，而且webpack4虽然可以自定义配置，但是配置过程还是较为繁琐，所以我们使用react-app-rewired来减少配置，react-app-rewired传送门：https://github.com/timarney/react-app-rewired

webpack4官方不再支持node4以下的版本，依赖node的环境版本>=6.11.5，当然考虑到最佳的es6特性实现，建议node版本可以升级到V8.9.4或以上版本，具体更新说明部分可以见：webpack4更新日志

1、初始化创建一个 demo 文件夹，做一些简单的初始化信息，并本地安装 webpack，此时项目中没有 webpack 配置文件。

mkdir webpack4-demo ## 创建目录
cd webpack4-demo ## 进入目录
npm install yarn -g
yarn init -y ## 快速 yarn 初始化
yarn add webpack --dev ## 安装 webpack

2、修改 package.json 文件：

"scripts": {
    "build": "webpack"
}

3、创建项目目录

在目录下创建 src 文件夹，并且新建一个文件 index.js 并且输入内容 console.log('hello webpack 4')，再次运行 yarn build。

4、运行

yarn build

过程中会报错

根据提示安装webpack-cli：

yarn add webpack-cli

5、再次运行

 yarn build

这时可以看到编译成功，项目目录下多出一个 dist 文件夹，我们事先也并没有配置 output 输出指向，Webpack 默认将 bundle 好的内容，放在了 dist 文件夹内。

在执行成功的过程中，有一处警告提示，webpack4新增的mode属性，可以指定生产/开发模式。

6、此时根据你的项目框架React/Vue使用情况安装react/vue全家桶，省略(React项目需要安装react-scripts)。。。

7、接下来安装react-app-rewired最新版本，切记：不能安装react-app-rewired1.x版本

npm install react-app-rewired --save-dev

8、新建config-overrides.js，并输入

/* config-overrides.js */

module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
}

此时目录大体结构：

+-- your-project
|   +-- config-overrides.js
|   +-- node_modules
|   +-- package.json
|   +-- public
|   +-- README.md
|   +-- src

9、将package.json中的scripts替换如下：

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

10、此时react-app-rewired使用方式为

npm start 开发模式
npm run build 生产模式

如果想要修改默认配置，可以在config-overrides.js中完成我们的webpack配置文件修改。

11、使用customize-cra简化config-overrides配置

详见https://github.com/arackaf/customize-cra

12、package.json

{
  "name": "demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "accounting": "^0.4.1",
    "antd": "^3.15.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "echarts": "^4.2.0-rc.2",
    "echarts-for-react": "^2.0.15-beta.0",
    "echarts-gl": "^1.1.1",
    "less": "^3.9.0",
    "loadsh": "^0.0.3",
    "moment": "^2.24.0",
    "re-resizable": "^4.11.0",
    "react": "^16.8.2",
    "react-addons-pure-render-mixin": "^15.6.2",
    "react-dom": "^16.8.2",
    "react-intl": "^2.8.0",
    "react-redux": "^6.0.1",
    "react-router-config": "^5.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.5",
    "redux": "^4.0.1",
    "redux-promise-middleware": "^5.0.0"
  },
  "scripts": {
    "start