react之webpack常用配置

create-creact-app项目，如果需要手动修改配置，需先npm run eject弹出配置，这个过程是不可逆的。

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

1.用craco配置来去进行webpack相关配置。
2.用react-app-rewired 和 customize-cra进行webpack配置。

第一种方式：用craco配置来去修改webpack配置

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

修改package.json

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

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

1.打包build生成gizp压缩文件

npm install compression-webpack-plugin --save

在craco.config.js里添加

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后缀的文件需要nginx配置支持。

nginx.conf 添加配置

http {
 
    gzip  on;
    gzip_buffers 4 16k;
    gzip_comp_level 6;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    gzip_static on;
    gzip_http_version 1.1;
    gzip_proxied expired no-cache no-store private auth;
....

2.打包忽略console,debugger

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

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack')
module.exports = {
    webpack: {
        plugins: [
             new UglifyJsPlugin({
               // 开启打包缓存
              cache: true,
              // 开启多线程打包
               parallel: true,
                uglifyOptions: {
                    compress: {
                        warnings: false,
                        drop_debugger: true,
                        drop_console: true,
                    },
                },
                sourceMap: false,
                parallel: true,
            }),
     ]
}

3.分析打包后的文件体积

npm install webpack-bundle-analyzer --save

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

⚠️：生产版本关闭此项

4.查看打包的进度

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

完整配置

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: {
                    // 开启打包缓存
                    cache: true,
                    // 开启多线程打包
                    parallel: true,
                    compress: {
                        warnings: false,
                        drop_debugger: true,
                        drop_console: true,
                    },
                },
                sourceMap: false,
                parallel: true,
            }),
            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
            new SimpleProgressWebpackPlugin()
      ],  
};

第二种方式：用react-app-rewired 和 customize-cra进行webpack配置

npm i react-app-rewired --save-dev 
npm i customize-cra --save-dev
或
yarn add -D react-app-rewired 
yarn add -D customize-cra

修改package.json

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
}

在根目录添加 config-overrides.js，配置以下内容

const {override, addWebpackAlias, addWebpackPlugin} = require("customize-cra");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');// 分析打包后的文件体积
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin')

const path = require('path')
const paths = require('react-scripts/config/paths')
paths.appBuild = path.join(path.dirname(paths.appBuild), 'docker/build')

if (process.env.NODE_ENV === "production") {
  process.env.GENERATE_SOURCEMAP = "false";
}

const IS_PROD = ['prod', 'production'].includes(process.env.NODE_ENV)

module.exports = override(
  // 打包增加进度条提示
  addWebpackPlugin(new ProgressBarPlugin()),
  IS_PROD && addWebpackPlugin(new CompressionPlugin({
    algorithm: "gzip",
    test: /\.(js|css|html)$/,
    threshold: 10240,// 大于10kb的才被压缩
    minRatio: 0.8//压缩比例
  })),
  // package.json文件 添加 "build:analyzer": "cross-env ANALYZER=true react-app-rewired build"
  process.env.ANALYZER && addWebpackPlugin(new BundleAnalyzerPlugin()),
  // 注意是production环境启动该plugin
  process.env.NODE_ENV === 'production' && addWebpackPlugin(
  new UglifyJsPlugin({
    // 开启打包缓存
    cache: true,
    // 开启多线程打包
    parallel: true,
    uglifyOptions: {
      // 删除警告
      warnings: false,
      compress: {
        // 移除console
        drop_console: true,
        // 移除debugger
        drop_debugger: true
      }
    }
  })),
  addWebpackAlias({
    "@": path.join(__dirname, "./src"),
  }), (config) => {
    if (process.env.NODE_ENV === "production") {
      config.devtool = false;
    }
    return config
  }
)