Webpack 路径参数不是字符串

Question

我一直在绞尽脑汁试图弄清楚为什么 Webpack 对于入口模块“app”说，路径不是字符串。它与我在 stackoverflow 上读到的其他错误并不完全相同，这就是为什么它导致我自己问这个问题。

我正在使用最新的 Webpack (5.16) 和 Webpack-cli(4.4) 并尝试构建它以在 Node 上运行。

我有以下webpack.config.js，其中我仅添加了统计信息部分来尝试调试问题：

'use strict'

 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');

 module.exports = {
   context: __dirname,
   stats: {
     logging: true,
     loggingDebug: [/webpack/],
     loggingTrace: true,
     errors: true,
     errorStack: true,
     errorDetails: true,
   },
   entry: {
     app: './js/app.js'
   },
   optimization: {
     minimize: true
   },
   plugins: [
     new webpack.ProvidePlugin({
       $: 'jquery',
       jQuery: 'jquery',
       'window.jQuery': 'jquery',
       Popper: ['popper.js', 'default'],
     }),
     new MiniCssExtractPlugin(),
   ],
   output: {
     publicPath: '/',
     path: __dirname + '/dist',
     filename: '[name].bundle.js',
   },
   module: {
     rules: [
        { 
         test: /\.m?js$/, exclude: /(node_modules)/, 
         use: ['babel-loader', { options: { presets: ['@babel/preset-env'] } }]
        },
        {
         test: /\.(scss)$/,
         use: [{
           loader: 'style-loader',
         }, {
           loader: 'css-loader',
         }, {
           loader: 'postcss-loader',
           options: {
             plugins: function () {
               return [
                 require('precss'),
                 require('autoprefixer')
               ]
             }
           }
         }, {
            loader: 'sass-loader'
         }]
       },
       {
         test: /\.css$/,
         use: [MiniCssExtractPlugin.loader, 'css-loader']
       },
       { 
        test: /\.(woff|woff2)$/, 
        use: ['url-loader', { options: { limit: 5000 } } ] 
       },
       { 
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
        use: ['url-loader', { options: { limit: 10000, mimetype: 'application/octet-stream' } } ] 
       },
       { 
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
        use: ['url-loader', { options: { limit: 10000, mimetype: 'image/svg+xml' } } ] 
       },
       {
         test: require.resolve('jquery'),
         use: [{
           loader: 'expose-loader',
           options: {
             exposes: ['$','jQuery']
           }
         }]
       }
     ],
    },
  }

我的app.js文件中的以下代码：

 import 'bootstrap'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import 'counterup/jquery.counterup.js'
 import '../template/js/custom.js'
 import '../template/css/style.css'

每当我在这段代码上运行 webpack 时，我总是会收到错误：

 ERROR in app
 Module not found: Error: path argument is not a string
 ModuleNotFoundError: Module not found: Error: path argument is not a string
     at factory.create (/app/node_modules/webpack/lib/Compilation.js:1656:28)
     at hooks.factorize.callAsync (/app/node_modules/webpack/lib/NormalModuleFactory.js:708:13)
     at eval (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
     at hooks.resolve.callAsync (/app/node_modules/webpack/lib/NormalModuleFactory.js:272:22)
     at eval (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
     at err (/app/node_modules/webpack/lib/NormalModuleFactory.js:494:15)
     at err (/app/node_modules/webpack/lib/NormalModuleFactory.js:118:11)
     at resolveRequestArray (/app/node_modules/webpack/lib/NormalModuleFactory.js:557:8)
     at /app/node_modules/neo-async/async.js:2830:7
     at done (/app/node_modules/neo-async/async.js:2925:13)

这里的“路径”指的是什么？我已经尝试了一切，从添加上下文、更改条目、移动 app.js 文件，以及从 app.js 中删除除 bootstrap 之外的所有内容。似乎无论我做什么，我都无法让它真正编译。我查看了 Webpack 代码，但堆栈跟踪并没有真正提供任何有用的提示。

任何帮助将不胜感激。

Answer 1

为了简化代码，我们删除了一些属性，你是对的，没有必要导入path.

Node: 14.15.1 Webpack: 5.16 Webpack-cli: 4.4

module.exports = {
  entry: {
    app: './js/app.js',
  },
  output: {
    path: __dirname + '/dist',
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          // you forgot to set the `loader` property
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};