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：

 {

        test: /\.(png|jpe?g|gif)$/i,

        use: [

          {

            loader: 'file-loader',

            options: {

              esModule: false,

            },

          },

        ],

      },

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，但它工作。