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

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 }]
};