webpack未介绍的参考文献:未定义过程

Question

i在Angular5应用程序中有Uncaught ReferenceError: process is not defined错误 - 无CLI。我了解WebPack DefinePlugin应该创建一些Globals，但我对其进行了配置。我不确定为什么该过程不可用 - 我已经在REPL中确认了这一点。

我是Webpack的新手，不知道该从哪里开始寻找。谁能帮忙？

webpack config

const webpack = require('webpack');
const helpers = require('./helpers');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlElementsPlugin = require('./html-elements-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const ngcWebpack = require('ngc-webpack');
const buildUtils = require('./build-utils');
module.exports = function (options) {
  const isProd = options.env === 'production';
  const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, options.metadata || {});
  const ngcWebpackConfig = buildUtils.ngcWebpackSetup(isProd, METADATA);
  const supportES2015 = buildUtils.supportES2015(METADATA.tsConfigPath);
  const entry = {
    polyfills: './src/polyfills.browser.ts',
    vendor:    './src/vendor.browser.ts',
    main:      './src/main.browser.ts'
  };
  Object.assign(ngcWebpackConfig.plugin, {
    tsConfigPath: METADATA.tsConfigPath,
    mainPath: entry.main
  });
  return {
    performance: { hints: false },
    entry: entry,
    resolve: {
      mainFields: [ ...(supportES2015 ? ['es2015'] : []), 'browser', 'module', 'main' ],
      extensions: ['.ts', '.js', '.json'],
      modules: [helpers.root('src'), helpers.root('node_modules')],
      alias: buildUtils.rxjsAlias(supportES2015)
    },
    module: {
      rules: [
        ...ngcWebpackConfig.loaders,
        { test: /.scss$/, use: ['raw-loader', 'sass-loader'] },
        { test: /.(woff2?|ttf|eot|svg)$/, use: 'url?limit=10000&name=[name].[ext]' },
        { test: /bootstrap/dist/js/umd//, use: 'imports?jQuery=jquery' },
        {
          test: /.css$/,
          use: ['to-string-loader', 'css-loader']
        },
        {
          test: /.html$/,
          use: 'raw-loader',
          exclude: [helpers.root('src/index.html')]
        },
        {
          test: /.(jpg|png|gif)$/,
          use: 'file-loader'
        }
      ],
    },
    plugins: [
      new DefinePlugin({
        'ENV': JSON.stringify(METADATA.ENV),
        'HMR': METADATA.HMR,
        'AOT': METADATA.AOT,
        'process.env.ENV': JSON.stringify(METADATA.ENV),
        'process.env.NODE_ENV': JSON.stringify(METADATA.ENV),
        'process.env.HMR': METADATA.HMR,
        'process.env.API_URL': JSON.stringify(METADATA.API_URL)
      }),
      new CommonsChunkPlugin({
        name: ['polyfills', 'vendor'].reverse()
      }),
      new CommonsChunkPlugin({
        minChunks: Infinity,
        name: 'inline'
      }),
      new CommonsChunkPlugin({
        name: 'main',
        async: 'common',
        children: true,
        minChunks: 2
      }),
      new CopyWebpackPlugin([{
        from: 'src/assets',
        to: 'assets'
      }]),
      new HtmlWebpackPlugin({
        template: 'src/index.html',
        title: METADATA.title,
        chunksSortMode: function (a, b) {
          const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"];
          return entryPoints.indexOf(a.names[0]) - entryPoints.indexOf(b.names[0]);
        },
        metadata: METADATA,
        inject: 'body',
        xhtml: true,
        minify: isProd ? {
          caseSensitive: true,
          collapseWhitespace: true,
          keepClosingSlash: true
        } : false
      }),
      new ScriptExtHtmlWebpackPlugin({
        sync: /inline|polyfills|vendor/,
        defaultAttribute: 'async',
        preload: [/polyfills|vendor|main/],
        prefetch: [/chunk/]
      }),
      new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: 'popper.js/dist/umd/popper.js',
        Hammer: 'hammerjs/hammer',
        Rickshaw: 'rickshaw',
        moment: 'moment',
        fullCalendar: 'fullcalendar',
        Raphael: 'webpack-raphael',
        'window.Raphael': 'webpack-raphael',
        Skycons: 'skycons/skycons',
        Dropzone: 'dropzone',
        tinymce: 'tinymce/tinymce.js'
      }),
      new HtmlElementsPlugin({
        headTags: require('./head-config.common')
      }),
      new LoaderOptionsPlugin({}),
      new ngcWebpack.NgcWebpackPlugin(ngcWebpackConfig.plugin), 
      new InlineManifestWebpackPlugin(),
    ],
    node: {
      global: true,
      crypto: 'empty',
      process: true,
      module: false,
      clearImmediate: false,
      setImmediate: false
    }
  };
}

Answer 1

我从未在DefinePlugin条目中见过process.env.xxx，您可以尝试删除该部分：

    'ENV': JSON.stringify(METADATA.ENV),
    'NODE_ENV': JSON.stringify(METADATA.ENV),
    'HMR': METADATA.HMR,
    'API_URL': JSON.stringify(METADATA.API_URL)

这些变量是您需要在应用程序上定义的应用程序还是仅针对您的构建？

如果仅适用于您的构建，则不需要定义Plugin，只需定义这样的环境中的变量：

    process.env.ENV = JSON.stringify(METADATA.ENV);
    process.env.NODE_ENV = JSON.stringify(METADATA.ENV);
    process.env.HMR: METADATA.HMR;
    process.env.API_URL: JSON.stringify(METADATA.API_URL);

更新

如果您想使这些值可用于应用程序，我们完成的一件事是使用String Replacewebpackplugin替换字符串持有人，用针对目标环境的实际值

   {
      test: /.js$/,
      use: [
        {
          loader: StringReplacePlugin.replace({
            replacements: {
              pattern: /_API_URL_/ig,
              replacement: function (match, p1, offset, string) {
                return getApiUrlForEnv(process.env.NODE_ENV);  // implement this
              }
            };
          })
        },
        '@ngtools/webpack'
      ]
    }

Answer 2

我通过将一个简单的过程添加到true中，将其修复在我的WebPack配置中：

 node: {
  global: true,
  crypto: 'empty',
  process: true,
  module: false,
  clearImmediate: false,
  setImmediate: false,
  fs: 'empty'
}