Webpack 文件加载器输出 [目标模块]

共4个回答,已解决, 标签: javascript html webpack

我正在使用 webpackHtmlWebpackPlugin, html-loader and file-loader. I have a simple project structure in which I use no frameworks, but only typescript. Thus, I write my HTML code directly to index.html. I also use this HTML file as my template in HtmlWebpackPlugin

正如所有网站一样,我需要在我的资产文件夹中放置一个引用 PNG 的图像。file-loader should load the file correctly put the new filename inside the src tag but that is not what is happening. Instead, as the value of src tag, I have [object Module]. I assume the file-loader emits some object and it is represented like this when its .toString() method is run. However, I can see that file-loader has processed the file successfully and emitted with new name to the output path. I get no errors. Here is my webpack configuration and index.html

康斯特 projectRoot = 道路的决心 (_ _ 目录名,“..”);

{
入口: 路径。解决方案 (项目,'src','应用程序'),
模式: '生产',
输出: {
道路: 道路的决心 (projectRoot,'dist'),
文件名: 'app.bundle.J'
},
解析: {
扩展: ["ts '、' js']
},
模块: {
规则: [
{
测试:/.html $/i,
用途: 'html-loader'
},
{
测试:/厘米。(eot | ttf | woff | woff2 | svg | png) $/i,
使用方法: “file-loader'
},
{
测试:/\.scss $/i,
使用方法: [
{
装载机: MiniCssExtractPlugin.装载机,
可选: {
Hmr-假
}
},
{
装载机: 'css-loader',
可选: {
SourceMap: 假睫毛
}
},
{
装载机: 'sass-loader',
可选: {
SourceMap: 假睫毛
}
}
]
},
{
不包括:/node_modules/,
测试:/\.ts $/,
使用方法: “ts-loader'
}
]
},
插件: [
新 CleanWebpackPlugin (),
新 HtmlWebpackPlugin ({
模板: 道路的决心 (projectRoot,'src','index.html ')
}),
新 MiniCssExtractPlugin ({
文件名: '[name].[hash].css ',
ChunkFilename: '[id].[hash].css ',
IgnoreOrder: 假睫毛
})
]
};

Index.html:

工程结构:

配置/
的WebPack.config.js
区/
Src/
款式/
资产/
Logo.png
Index.html
应用程式的 ts

编辑我的包的 json 的依赖关系:

"清理的WebPack-插件“: ”3.0.0 ^",
《 Css 加载程序 ”:“ ^ 3.2.0 ",
"文件加载程序”: “^ 5.0.2",
“Html-webpack-plugin”: “^ 3.2.0”,
"小-css-精华-插件": "^ 0.8.0",
“Node-sass”: “^ 4.13.0”,
“不得装载": "^ 8.0.0",
"Style-loader": "^ 1.0.0",
“Ts-装载机”: “6.2.1 ^",
"打字稿》:" ^ 3.7.2 ",
“Webpack”: “^ 4.41.2”,
“Webpack-cli”: “^ 3.3.10”,
“Webpack-dev-server”: “^ 3.9.0”
第1个答案(采用)

根据文件加载程序文档:

默认情况下,文件加载程序生成使用 ES 模块语法的 JS 模块。在某些情况下,使用 ES 模块是有益的,例如模块串联和树抖动。

似乎 webpack 解决了 ES 模块require() calls to an object that looks like this: {default: module},而不是对扁平模块本身。这种行为有些争议,并在这个问题.

因此,为了得到你的src attribute to resolve correctly, you need to be able to access the default导出模块的属性。如果你使用一个框架,你应该能够做这样的事情:


或者,您可以启用文件加载程序的 CommonJS 模块语法,webpack 将直接将其解析为模块本身。集合esModule:false在您的 webpack 配置中。

Webpack.config.js:

{
测试:/\。(png | jpe?g | gif) $/i,
用途: [
{
加载程序: “文件加载程序”,
选项: {
EsModule: false,
},
},
],
},
第2个答案

这发生在文件加载程序版本 5.0.2 上,早期版本工作正常,无需调用default属性

第3个答案

你能澄清一下你正在使用的文件加载器的确切版本吗?我知道,因为这发生在几个小时前,我有 ^ 5.0.2 版本。

第4个答案

@ Stellr42 的建议修复esModule: false in your file-loader配置是当前最佳的解决方法。

然而,这实际上是一个错误html-loader这里正在跟踪:Https://github.com/webpack-contrib/html-loader/issues/203

它看起来像 ES 模块支持被添加到file-loader, css-loader, and other friends, but html-loader被错过了。

一旦这个错误被修复,最好删除esModule: false and simply upgrade html-loader,因为 ES 模块提供了一些小的好处 (如文档)

或者,如果 (像我一样),你发现了这个问题,因为你在加载图像时遇到了困难来自 CSS(而不是从 HTML),那么修复只是升级css-loader,无需禁用 ES 模块。

相关问题

如何从异步调用返回响应? 循环中的 JavaScript 闭包--简单的实际示例 如何从异步调用返回响应? RegEx 匹配打开的标记, 但 XHTML 独立标记除外 PHP 邮件功能不能完成电子邮件的发送 如何从最后一行中的元素中删除边框? 类型错误: clean webpackplugin 不是构造函数 Postcss-svgo: TypeError: 无法设置未定义 (盖茨比) 的属性 “multiscont” Webpack 文件加载器输出 [目标模块]