Webpack 5 - 未捕获的 ReferenceError：未定义进程

Question

这里是 Webpack 新手，webpack cli 告诉我，我需要为 crypto 提供别名，因为 webpack 不再包含默认节点库。现在我遇到了这个错误，其他答案并没有太大帮助。 crypto-browserify 正在尝试访问 process.browser。谁能阐明更多？ cli 告诉我也要安装stream-browserify，所以我照做了。

React v17、Babel 7.12.9、webpack 5.6.0

webpack.common.js

const paths = require('./paths');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const dotenv = require('dotenv-webpack');

module.exports = {
  entry: [paths.src + '/index.js'],
  output: {
    path: paths.build,
    filename: '[name].bundle.js',
    publicPath: '/',
  },
  plugins: [
    new dotenv(),
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: paths.public,
          to: 'assets',
          globOptions: {
            ignore: ['*.DS_Store'],
          },
        },
      ],
    }),
    new HtmlWebpackPlugin({
      title: 'Webpack Boilerplate',
      // favicon: paths.src + '/images/favicon.png',
      template: paths.src + '/template.html',
      filename: 'index.html',
    }),
  ],
  resolve: {
    fallback: {
      crypto: require.resolve('crypto-browserify'),
      stream: require.resolve('stream-browserify'),
    },
  },
  module: {
    rules: [
      // javascript
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      // images
      {
        test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
        type: 'asset/resource',
      },
      // Fonts and SVGs
      {
        test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
        type: 'asset/inline',
      },
      // CSS, PostCSS, and Sass
      {
        test: /\.(scss|css)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              esModule: true,
              sourceMap: true,
              importLoaders: 1,
              modules: {
                auto: true,
                namedExport: true,
              },
            },
          },
          { loader: 'postcss-loader', options: { sourceMap: true } },
          { loader: 'sass-loader', options: { sourceMap: true } },
        ],
      },
    ],
  },
};

webpack.dev.js

const webpack = require('webpack');
const { merge } = require('webpack-merge');
const common = require('./webpack.common');

module.exports = merge(common, {
  mode: 'development',

  // Control how source maps are generated
  devtool: 'inline-source-map',

  // Spin up a server for quick development
  devServer: {
    historyApiFallback: true,
    contentBase: paths.build,
    open: true,
    compress: true,
    hot: true,
    port: 8080,
  },

  plugins: [
    // Only update what has changed on hot reload
    new webpack.HotModuleReplacementPlugin(),
  ],
});

Answer 1

在 webpack 5 中，自动 node.js polyfills 被移除。在迁移文档中提到

• 尽可能使用与前端兼容的模块。
• 可以为 node.js 核心模块手动添加 polyfill。 错误消息将提示如何实现。
• 包作者：使用 package.json 中的浏览器字段制作一个 包前端兼容。提供替代品 浏览器的实现/依赖项。

请参阅this 问题。

现在您可以参考此PR 并检查已删除的库并安装它们。 接下来为您的 webpack 配置中的 lib 添加 alias。

例如

resolve: {
    alias: {
       process: "process/browser"
    } 
 }

更新： 这也可以使用ProvidePlugin

package.json

"devDependencies": {
   ...
   "process": "0.11.10",
}

webpack.config.js

module.exports = {
  ...
  plugins: [
      new webpack.ProvidePlugin({
             process: 'process/browser',
      }),
  ],
}