基于CRACO对create-react-app创建项目实现Webpack定制化（一）什么是CRACO？ CRACO是C

什么是CRACO？

CRACO是Create React App Configuration Override的缩写，顾名思义就是对通过create-react-app创建的项目配置实现重写。

CRACO作用

可以通过在应用程序的根目录添加单个配置如craco.config.js文件并自定义 eslint、babel、postcss 配置等，不需要使用eject即可获得 create-react-app 和自定义配置的好处。（通常可能会选择 npm run eject弹出配置后魔改。但是，eject 是不可逆操作，弹出配置后，你将无法跟随官方的脚步去升级项目的 react-script 版本）

安装

安装craco

 yarn add  @craco/craco
 //或者
 npm install  @craco/craco --save

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

3. 修改package.json

4. 启动项目进行开发

npm start

配置

CRACO配置有craco.config.ts，craco.config.js，.cracorc.ts，.cracorc.js或.cracorc文件，或在指定的文件package.json。该文件分为几个部分，代表构成默认 create react app的主要部分。

如果同一目录下有多个配置文件，CRACO 只会使用一个。优先顺序是：

package.json
craco.config.ts
craco.config.js
.cracorc.ts
.cracorc.js
.cracorc

配置文件craco.config.js

打包配置压缩文件

npm install compression-webpack-plugin --save //打包build生成gizp压缩文件

compression-webpack-plugin 打包的文件生成 .gz后缀的文件需要服务器配置支持

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const webpack = require('webpack');
module.exports = {
    webpack: {
        plugins: [
            // 生成压缩包
            new CompressionWebpackPlugin({
                algorithm: 'gzip',
                test: new RegExp(
                    '\\.(' +
                    ['js', 'css'].join('|') +
                    ')$'
                ),
                threshold: 1024,
                minRatio: 0.8
            }),
            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        ]
    }
};

打包忽略console,debugger

npm install uglifyjs-webpack-plugin@1 --save-dev

必须为1.0版本，否则打包报错

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack')
module.exports = {
    webpack: {
        plugins: [
             new UglifyJsPlugin({
                uglifyOptions: {
                    compress: {
                        warnings: false,
                        drop_debugger: true,
                        drop_console: true,
                    },
                },
                sourceMap: false,
                parallel: true,
            }),
        ]
};

打包引用antd

npm i @babel/plugin-proposal-decorators --save -dev

module.exports = {
    babel: {
        plugins: [
            ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
            ['@babel/plugin-proposal-decorators', { legacy: true }]
        ]
    }
};

查看打包的进度

npm i webpackbar

const WebpackBar = require('webpackbar');
module.exports = {
    webpack: {
        plugins: [
            new WebpackBar()
        ],
    }
};

支持less文件, 实现支持 css-modules 的功能由于 CRA 脚手架默认不支持 less，所以需要通过拓展来实现：

// 安装craco-less包，支持覆写webpack loader相关配置
yarn add craco-less -D
// 同时需要安装less 和 less-loader
yarn add less less-loader -D

const CracoLessPlugin = require('craco-less');

const lessModuleRegex = /\.module\.less$/;
module.exports = {
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: {
                            '@primary-color': 'red', // 全局主色
                        },
                        javascriptEnabled: true,
                    },
                },
                moodifyLessRule: (lessRule, context) => {
                    lessRule.test = lessModuleRegex;
                    lessRule.exclude = /node_modules|antd\.css/;
                    return lessRule;
                },
                cssLoaderOptions: {
                    modules: {
                        localIdentName: "[local]_[hase:base64:5]"
                    }
                }
            },
        },
    ],
}

上面只是列举了部分配置，大家可以按需添加配置使用