Webpack多入口配置报错：无法解析auth模块求助

核心原因 #

你的webpack.config.js里重复定义了entry和output对象属性，在JavaScript对象中，后声明的同名属性会直接覆盖前面的。所以最终Webpack实际读取的只有最后一个entry（即main那组），auth的入口配置被完全忽略了。这就是为什么移除main入口后能正常构建——此时auth的配置才会生效。

修复后的配置 #

将重复的entry合并成一个对象，output只保留一份即可：

const path = require('path')

module.exports = {
  entry: {
    auth: [
      path.resolve(__dirname, 'src/js/auth.js'),
      path.resolve(__dirname, 'src/js/msal-2.28.1.js')
    ],
    main: [
      path.resolve(__dirname, 'src/js/index.js'),
      path.resolve(__dirname, 'src/js/api.js')
    ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 3000,
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: () => [require('autoprefixer')]
              }
            }
          },
          { loader: 'sass-loader' }
        ]
      }
    ]
  }
}

额外检查点 #

错误提示里提到的Did you mean './auth'，需要确认你代码中引用auth模块的路径是否正确：如果是在src/js目录下的文件中引用auth.js，应该使用相对路径./auth，而不是直接写auth（Webpack会把后者当成npm包去查找）。

内容的提问来源于stack exchange，提问作者yppaL