craco部分配置

🌟 使用craco进行webpack的相关配置

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

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

craco.config.js文件中进行相关配置

😸 修改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的按需引入和自定义主题

//yarn add @babel/plugin-proposal-decorators --save -dev
//yarn add craco-less

const CracoLessPlugin = require('craco-less');
module.exports = {
    //样式的按需引入
    babel: {
        plugins: [
            ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
            ['@babel/plugin-proposal-decorators', { legacy: true }]
        ]
    },
    //配置自定义主题
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: { '@primary-color': '#1DA57A' },
                        javascriptEnabled: true,
                    },
                },
            },
        },
    ],
};

🖥 配置别名

//在craco.config,.js里加上
const path = require('path');
module.exports = {
  webpack: {
    // 别名
    alias: {
      "@": path.resolve("src"),
      "@utils": path.resolve("src/utils"),
    }
  },

☎ 配置代理

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8000',
                changeOrigin: true,
                pathRewrite: {"^/api": ''}
            }
        },
    },
    // tailwindcss 的相关配置，如果没有使用到可以去掉
    style: {
        postcss: {
            plugins: [
                require('tailwindcss'),
                require('autoprefixer'),
            ],
        },
    },
}

🍁 查看打包分析明细

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

:happy: 完整配置

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