编辑-如果只需要答案，则忽略

看到这个问题仍在接受意见和赞成票，我觉得有责任分享一些知识后，通过网络包兔子洞和出来的另一端。
如果您：

• 正在构建一个格林菲尔德/早期的现代javascript项目
• 正在考虑从create-react-app迁移
• 我没有太多捆绑销售的经验
• 我不需要模块联合或服务器端渲染等高级功能（不再需要Webpack）

考虑使用下一代捆绑包，如vite/parcel（易于设置）、esbuild/rollup（需要更多设置）
Webpack是对前端世界的一个了不起的贡献，我很高兴我学会了它所有的复杂之处，然而，新的捆绑包在开发过程中 * 快得多 *，而且更容易维护。尽管文档很棒，但学习曲线会使调试变得非常痛苦。
澄清一下，我不是这些项目的维护者--只是一个喜欢好工具的开发者。在今天的环境中，webpack就像是用大锤敲坚果。

编辑结束

Webpack新手，webpack cli告诉我，我需要提供一个密码别名，因为webpack不再包含默认节点库。现在我得到这个错误，其他答案没有帮助这么多。crypto-browserify正在尝试访问process.browser。谁能提供更多信息？cli告诉我也安装stream-browserify，所以我安装了。
Reactv17，巴别塔7.12.9，网络包5.6.0

webpack.通用.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.开发人员.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(),
  ],
});