如何在create-react-app 2.x中使用compression-webpack-plugin 和webpack-bundle-analyzer插件

原创

于 2019-03-20 15:34:08 发布 · 2k 阅读

CC 4.0 BY-SA版权

本文介绍了如何在不eject create-react-app的情况下，利用craco和craco-antd进行配置扩展，实现webpack的自定义。通过3个步骤设置，包括安装craco、创建配置文件和修改启动配置。此外，还添加了webpack-bundle-analyzer以展示包大小分布，并使用compression-webpack-plugin在构建时生成.gz压缩文件。

create-react-app对webpack的配置进行了封装并默认隐藏了配置文件，如何不通过 yarn eject 的方式暴露配置文件而进行webpack的自定义配置呢？

使用craco和craco-antd进行再配置

不会直接去修改create-react-app的默认配置，而是在create-react-app配置的基础上进行扩展。类似的解决方案还有react-app-rewired

使用步骤

1.安装 craco

$ yarn add @craco/craco

# OR

$ npm install @craco/craco --save

2.在项目根目录新建craco.config.js文件

my-app
├── node_modules
├── craco.config.js
└── package.json

3.修改 package.json里的启动配置

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "craco start",
-   "build": "react-scripts build",
+   "build": "craco build",
-   "test": "react-scripts test",
+   "test": "craco test",
}