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",
}
配置文件craco.config.js
通过上面3步已经可以扩展webpack配置了，接下来就根据需求去配置即可。下面介绍我使用过的一些常见配置
yarn add webpack-bundle-analyzer //分析打包后的文件体积
yarn add compression-webpack-plugin //build生成gizp压缩文件
1.webpack-bundle-analyzer 在yarn start后默认在浏览器localhost:8888可以查看打包分布图
2.compression-webpack-plugin 在yarn build 可以直接在build文件夹中生成 .gz后缀的文件
/* craco.config.js */
const CracoAntDesignPlugin = require("craco-antd");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
webpack: {
plugins: [
new BundleAnalyzerPlugin(),
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
['js', 'css'].join('|') +
')$'
),
threshold: 1024,
minRatio: 0.8
}),
]
},
plugins: [{ plugin: CracoAntDesignPlugin }]
};
