PowerShell 中的 Webpack 脚本错误，但 CMD.exe 中没有错误

Question

我正在尝试通过 GitHub 操作和工作流程设置CI/CD 。通过 Windows PowerShell（带提升）运行构建脚本时，Webpack 失败并出现以下错误：

[webpack-cli] TypeError：“compilation”参数必须是
位于
d:\ dev\theApp\node_modules\terser-webpack-plugin\dist\index.js:566:67
at _next30（创建时评估（d:\Dev\theApp\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:19 :10),
:44:1)
在 _next8 (eval at create (d:\Dev\theApp\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:19:10),
:97:1)
在 Hook 处。 eval [as call] (eval at create (d:\Dev\theApp\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:19:10),
:117:1)
at Hook.CALL_DELEGATE [as _call] ( d:\Dev\theApp\node_modules\webpack\node_modules\tapable\lib\Hook.js:14:14)
在 Compiler.newCompilation (d:\Dev\theApp\node_modules\webpack\lib\Compiler.js:1044:26 ）
在 d:\Dev\theApp\node_modules\webpack\lib\Compiler.js:1088:29
在 Hook.eval [as callAsync] （eval at create (d:\Dev\theApp\node_modules\webpack\node_modules\tapable\ lib\HookCodeFactory.js:33:10),
:6:1)
在 Hook.CALL_ASYNC_DELEGATE [as _callAsync] (d:\Dev\theApp\node_modules\webpack\node_modules\tapable\lib\Hook.js:18:14)

从CMD.exe的提升实例运行时不会发生这种情况。将 GitHub 工作流中的步骤的 shell 参数设置为“cmd”仍然失败，因为运行程序服务使用 PowerShell 并以命令作为参数来启动 cmd.exe。

文件package.json中的 npm 脚本

"build": "webpack --config webpack.prod.js",

文件Webpack.common.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(m?js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.m?js/,
        resolve: {
          fullySpecified: false,
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          },
        ],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader',
        ],
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.svg$/,
        loader: 'svg-inline-loader',
      },
    ],
  },
  entry: './src/index.jsx',
  output: {
    path: __dirname + '/../dist/theApp',
    chunkFilename: '[chunkhash].[name].bundle.js',
    publicPath: '/',
    filename: '[name].js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'TheApp',
      filename: 'default.aspx',
      template: './default.html',
    }),
  ],
  resolve: {
    extensions: ['.js', '.jsx', '.es6'],
  },
};

文件webpack.prod.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const TerserPlugin = require('terser-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = merge(common, {
  mode: 'production',
  plugins: [
    new CleanWebpackPlugin(),
  ],
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 100000,
      minRemainingSize: 50000,
      maxSize: 500000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 5,
      automaticNameDelimiter: '~',
      enforceSizeThreshold: 500000,
      cacheGroups: {
        utils: {
          minChunks: 1,
          test: /[\\/]node_modules[\\/](moment|lodash)[\\/]/,
          name: 'utils',
          chunks: 'all',
          priority: 0,
        },
        defaultVendors: {
          minChunks: 1,
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
        },
        default: {
          minChunks: 1,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
    minimize: true,
    minimizer: [
      new TerserPlugin({
        test: /\.js(\?.*)?$/i,
      }),
    ],
  },
});

Answer 1

我在使用 Webpack 时也遇到了这个错误。我通过将驼峰式字母添加到执行命令的目录的路径中解决了这个问题。

问题不在于 Webpack，而在于 Windows，特别是 PowerShell 以及处理区分大小写的方式。如果您使用其他命令提示符，则不会返回该错误。

我们来看以下案例：

我在目录中开发一个应用程序：

C:\Users\username\Desktop\myApp

我使用 Webpack 编译了该应用程序的资源。如果我执行in 中的命令，则会触发编译类型错误，因为 Webpack 找不到node_modules文件夹。要修复该错误，您只需将命令运行到正确的目录中，并使用驼峰命名法字母。npm run devc:\users\username\desktop\myapp

C:\Users\username\Desktop\myApp> npm run dev

Webpack 应该找到 node_modules 文件夹，并且您不会再遇到任何错误。