Webpack 文件加载器输出 [object Module]

Question

我正在使用带有HtmlWebpackPlugin,html-loader和file-loader. 我有一个简单的项目结构，其中我不使用任何框架，而只使用打字稿。因此，我将我的 HTML 代码直接写入index.html. 我也使用这个 HTML 文件作为我在HtmlWebpackPlugin.

正如所有网站一样，我需要在我的资产文件夹中放置一个引用 PNG 的图像。file-loader应该正确加载文件将新文件名放在src标签内，但这不是正在发生的事情。相反，作为src标签的值，我有[object Module]. 我假设它会发出一些对象，并且在运行它的方法file-loader时它是这样表示的。.toString()但是，我可以看到file-loader已成功处理文件并以新名称将其发送到输出路径。我没有错误。这是我的 webpack 配置和index.html.

const projectRoot = path.resolve(__dirname, '..');

{

  entry: path.resolve(projectRoot, 'src', 'app.ts'),

  mode: 'production',

  output: {

    path: path.resolve(projectRoot, 'dist'),

    filename: 'app.bundle.js'

  },

  resolve: {

    extensions: ['.ts', '.js']

  },

  module: {

    rules: [

      {

        test: /\.html$/i,

        use: 'html-loader'

      },

      {

        test: /\.(eot|ttf|woff|woff2|svg|png)$/i,

        use: 'file-loader'

      },

      {

        test: /\.scss$/i,

        use: [

          {

            loader: MiniCssExtractPlugin.loader,

            options: {

              hmr: false

            }

          },

          {

            loader: 'css-loader',

            options: {

              sourceMap: false

            }

          },

          {

            loader: 'sass-loader',

            options: {

              sourceMap: false

            }

          }

        ]

      },

      {

        exclude: /node_modules/,

        test: /\.ts$/,

        use: 'ts-loader'

      }

    ]

  },

  plugins: [

    new CleanWebpackPlugin(),

    new HtmlWebpackPlugin({

      template: path.resolve(projectRoot, 'src', 'index.html')

    }),

    new MiniCssExtractPlugin({

      filename: '[name].[hash].css',

      chunkFilename: '[id].[hash].css',

      ignoreOrder: false

    })

  ]

};

Answer 1

根据文件加载器文档：默认情况下，file-loader 生成使用 ES 模块语法的 JS 模块。在某些情况下，使用 ES 模块是有益的，例如在模块连接和摇树的情况下。似乎 webpack 将 ES 模块require()调用解析为如下所示的对象：{default: module}，而不是扁平化模块本身。这种行为有些争议，本期对此进行了讨论。因此，要让您的src属性正确解析，您需要能够访问default导出模块的属性。如果您使用的是框架，您应该能够执行以下操作：<img src={require('assets/logo.png').default}/> <!-- React --><!-- OR --><img src="require('assets/logo.png').default"/> <!-- Vue -->或者，您可以启用文件加载器的 CommonJS 模块语法，webpack 将直接解析为模块本身。esModule:false在你的 webpack 配置中设置。webpack.config.js：&nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; test: /\.(png|jpe?g|gif)$/i,&nbsp; &nbsp; &nbsp; &nbsp; use: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loader: 'file-loader',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; options: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; esModule: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; },

Answer 2

esModule: false在您的file-loader配置中建议的修复是当前最好的解决方法。然而，这实际上是一个在html-loader这里被跟踪的错误：https ://github.com/webpack-contrib/html-loader/issues/203看起来 ES Module 支持已添加到file-loader、css-loader和其他朋友，但html-loader错过了。修复此错误后，最好删除esModule: false并简单地升级html-loader，因为 ES 模块提供了一些小好处（如文档中所述）或者，如果（像我一样），您发现这个问题是因为您无法从 CSS（而不是从 HTML）加载图像，那么修复只是升级css-loader，无需禁用 ES 模块。

Answer 3

刚刚将我的文件加载器更新为 ^5.0.2 分钟前。我知道esModule: false是建议的修复，但这对我不起作用。我的解决方法<img src={require('assets/logo.png').default}/>很奇怪。第一次使用.default，但它工作。