javascript - 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.1Webpack: 5.16Webpack-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'],
          },
        },
      },
    ],
  },
};