create-react-app craco进行webpack配置(修改篇)

如何在不通过npm run eject进行webpack配置呢？

现在我们用craco配置来去进行webpack相关配置。

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

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

image.png

修改package.json

image.png

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

配置文件craco.config.js

npm install compression-webpack-plugin --save //打包build生成gizp压缩文件
npm install webpack-bundle-analyzer --save //分析打包后的文件体积

打包配置压缩文件

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

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$/),
    ]
};

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

打包忽略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 webpack-bundle-analyzer --save -dev

const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const webpack = require('webpack')
module.exports = {
    webpack: {
        plugins: [
            //打包分析
            new BundleAnalyzerPlugin(),
            ],
    }
};

⚠️：生产版本关闭此项

查看打包的进度

npm install simple-progress-webpack-plugin --save -dev

const webpack = require('webpack')
const SimpleProgressWebpackPlugin = require( 'simple-progress-webpack-plugin' )
module.exports = {
    webpack: {
        plugins: [
            new SimpleProgressWebpackPlugin()
              ],
    
    babel: {
        plugins: [
            ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
            ['@babel/plugin-proposal-decorators', { legacy: true }]
        ]
    },
    plugins: [
        {
            plugin: CracoVtkPlugin()
        }
    ]
};

完整配置

const CracoVtkPlugin = require("craco-vtk");
// const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const SimpleProgressWebpackPlugin = require( 'simple-progress-webpack-plugin' )
const webpack = require('webpack')
const path = require('path');
module.exports = {
    webpack: {
        // 别名
        alias: {
            "@": path.resolve("src"),
        },
        plugins: [
            //打包分析
            // new BundleAnalyzerPlugin(),
            // 打压缩包
            new CompressionWebpackPlugin({
                algorithm: 'gzip',
                test: new RegExp(
                    '\\.(' +
                    ['js', 'css'].join('|') +
                    ')$'
                ),
                threshold: 1024,
                minRatio: 0.8
            }),
            //
            new UglifyJsPlugin({
                uglifyOptions: {
                    compress: {
                        warnings: false,
                        drop_debugger: true,
                        drop_console: true,
                    },
                },
                sourceMap: false,
                parallel: true,
            }),

            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
            new SimpleProgressWebpackPlugin()

],
        //抽离公用模块
        optimization: {
            splitChunks: {
                cacheGroups: {
                    commons: {
                        chunks: 'initial',
                        minChunks: 2, maxInitialRequests: 5,
                        minSize: 0
                    },
                    vendor: {
                        test: /node_modules/,
                        chunks: 'initial',
                        name: 'vendor',
                        priority: 10,
                        enforce: true

                    }
                }
            }
        }
    },
    babel: {
        plugins: [
            ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
            ['@babel/plugin-proposal-decorators', { legacy: true }]
        ]
    },
    plugins: [
        {
            plugin: CracoVtkPlugin()
        }
    ]
};

以上配置是我项目中使用，可以按需使用。