webpack 5-未捕获引用错误：未定义流程 [英] Webpack 5 - Uncaught ReferenceError: process is not defined

问题描述

webpack新手在这里，webpack CLI告诉我需要为crypto提供别名，因为webpack不再包含默认节点库。现在我得到了这个错误，其他的答案没有太大的帮助。crypto-browserify正在尝试访问process.browser。有谁能透露更多的信息吗？CLI告诉我也要安装stream-browserify，所以我安装了。

Reaction v17、巴别塔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(),
  ],
});

推荐答案

在webpack中，删除了5个自动node.js多边形填充。在迁移文档中提到

• 尽可能尝试使用前端兼容模块。
• 可以手动为node.js核心模块添加PolyFill。 错误消息将提示如何实现该目标。
• 包作者：使用Package.json中的Browser字段创建 软件包前端兼容。提供替代方案 浏览器的实现/依赖项。

请参阅this问题。

现在您可以参考PR，检查已删除的库并安装它们。 接下来，为您的webpack配置中的库添加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',
      }),
  ],
}

这篇关于webpack 5-未捕获引用错误：未定义流程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！