Webpack 5 - キャッチされない ReferenceError: プロセスが定義されていません 質問する

***編集 - 回答のみが必要な場合は無視してください***

この質問がまだ閲覧数と賛成票を獲得していることを考えると、Webpack の迷路を抜けて抜け出した後の知識を共有する責任があると感じます。

もし、あんたが：

• グリーンフィールド/初期段階のモダンJavaScriptプロジェクトを構築している
• create-react-appからの移行を検討している
• バンドルに関する経験があまりない
• モジュールフェデレーションやサーバーサイドレンダリングなどの高度な機能は必要ありません（Webpackはもう必要ありません）

次世代バンドラーの使用を検討してください。ヴィテ/小包（簡単なセットアップ）、エスビルド/巻き上げる(さらに設定が必要です)

Webpackはフロントエンドの世界に素晴らしい貢献をしており、その複雑な部分をすべて学べてよかったです。しかし新しいバンドラーは多くの開発中は高速化され、保守も容易になります。うまく動作すると素晴らしいのですが、経験の浅い人にとっては、素晴らしいドキュメントがあるにもかかわらず、学習曲線がデバッグを非常に困難にする可能性があります。

明確にしておくと、私はこれらのプロジェクトのメンテナーではなく、単に優れたツールを楽しむ開発者です。今日の状況では、webpack はナットを割るのに大ハンマーを使用するのに匹敵します。

***編集終了***

Webpack 初心者ですが、webpack にはデフォルトのノード ライブラリが含まれなくなったため、crypto のエイリアスを指定する必要があると webpack cli から通知されました。今、このエラーが発生しています。他の回答はあまり役に立ちませんでした。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 } },
        ],
      },
    ],
  },
};

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