webpack - 无法从 v4 webpack 到 v5

Question

我看了迁移指南https://webpack.js.org/migrate/5/但很难理解我需要改变什么。以下是我得到的错误

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.module.rules[1].exclude has an unknown property 'test'. These properties are valid:
   object { and?, not?, or? }
 - configuration.node should be one of these:
   false | object { __dirname?, __filename?, global? }
   -> Include polyfills or mocks for various node stuff.
   Details:
    * configuration.node has an unknown property 'Buffer'. These properties are valid:
      object { __dirname?, __filename?, global? }
      -> Options object for node compatibility features.
    * configuration.node has an unknown property 'process'. These properties are valid:
      object { __dirname?, __filename?, global? }
      -> Options object for node compatibility features.

我正在使用

webpack v 5.x

webpack-cli 4.x

我的 webpack 文件

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    target: ['web', 'es5'],
    mode: 'development',
    entry: {
        app: [
            '@babel/polyfill',
            './src/index.js',
        ],
        vendor: ['react', 'moment', 'lodash/core']
    },
    output: {
        filename: '[name].bundle.js',
        path: __dirname + '/docs',
        publicPath: '/'
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                defaultVendors: {
                    chunks: 'initial',
                    name: 'vendor',
                    test: 'vendor',
                    enforce: true
                },
            }
        },
        runtimeChunk: true,
        minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
        usedExports: true
    },
    devServer: {
        historyApiFallback: true
    },
    module: {
        rules: [
            {
                test: /\.json$/,
                loader: "json-loader"
            },
            {
                test: /\.js[x]?$/,
                loader: 'babel-loader',
                exclude: {
                    test: /node_modules/,
                    not: [/@babel\/register/],
                },
                options: {
                    cacheDirectory: false,
                    presets: ['@babel/preset-react'],
                    plugins: ['@babel/plugin-transform-runtime'], // , 'lodash'
                    // rootMode: "upward",
                }
            },
            {
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        // you can specify a publicPath here
                        // by default it uses publicPath in webpackOptions.output
                        publicPath: __dirname + '/docs/stylesheets',
                        hmr: process.env.NODE_ENV === 'development',
                    },
                }, 'css-loader',]
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                use: 'url-loader?limit=100000'
            },
            {
                test: /\.jpg$/,
                use: 'file-loader'
            },
            {
                test: /\.(woff|woff2) (\?v=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=10000&mimetype=application/font-woff'
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=10000&mimetype=application/octet-stream'
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                use: 'file-loader'
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=10000&mimetype=image/svg+xml'
            }
        ]
    },
    resolve:
        {
            modules: [path.join(__dirname, 'src', 'js', 'jsx'), 'node_modules'],
            extensions: ['.js', '.jsx'],
            fallback: {
                fs: false
            }
        },

    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + '/src/index.html',
            filename: 'index.html',
            inject: true
        }),
        new webpack.DefinePlugin({
            'process.env' : {
                'NODE_ENV' : JSON.stringify(process.env.NODE_ENV || 'development'),
                'REACT_APP_GA_TRACKING_ID' : JSON.stringify('UA-xxx-1'),
                'VERSION' : JSON.stringify('95.7')
            }
        }), new webpack.ProvidePlugin({
            jQuery: "jquery",
            $: "jquery",
            jquery: 'jquery'
        }),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // all options are optional
            filename: '[name].bundle.css',
            chunkFilename: '[id].bundle.css',
            ignoreOrder: false, // Enable to remove warnings about conflicting
            // order
        }),
        new LodashModuleReplacementPlugin,
        new BundleAnalyzerPlugin({
            analyzerMode: 'static'
        }),
        new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
        /*new LodashModuleReplacementPlugin({
            "shorthands": true
        }),*/
    ],
    devtool: 'source-map',
    externals: [],
    node: {
        Buffer: false,
        process: false,
    }
};

Answer 1

Webpack v5节点配置不支持Buffer和process，只支持global, __filename, __dirname。可以看官方文档https://webpack.js.org/configuration/node/