Bor*_*ora 79 html javascript webpack
我将 webpack 与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
})
]
};
索引.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body class="dark">
<header>
<nav class="navigation">
<div class="left">
<img src="assets/logo.png" class="logo"> <!-- This logo is output as [object Module] -->
</div>
<div class="right">
</div>
</nav>
</header>
</body>
</html>
项目结构：
config/
webpack.config.js
dist/
src/
styles/
assets/
logo.png
index.html
app.ts
编辑 我的 package.json 依赖项：
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"file-loader": "^5.0.2",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.13.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"ts-loader": "^6.2.1",
"typescript": "^3.7.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
ste*_*r42 184
根据文件加载器文档：
默认情况下，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 -->
或者，您可以启用 file-loader 的 CommonJS 模块语法，webpack 将直接解析为模块本身。esModule:false在你的 webpack 配置中设置。
webpack.config.js：
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
esModule: false,
},
},
],
},
小智 11
@stellr42esModule: false在您的file-loader配置中建议的修复方法是目前最好的解决方法。
然而，这实际上是一个在html-loader这里被跟踪的错误：https : //github.com/webpack-contrib/html-loader/issues/203
貌似对file-loader、css-loader、 等朋友添加了 ES Module 支持，但是html-loader被漏掉了。
修复此错误后，最好删除esModule: false并简单升级html-loader，因为 ES 模块提供了一些小好处（如文档中所述）
或者，如果（像我一样）您发现这个问题是因为从 CSS（而不是从 HTML）加载图像时遇到问题，那么修复只是升级css-loader，无需禁用 ES 模块。
小智 6
刚刚将我的文件加载器更新到 ^5.0.2 分钟前。
我知道这esModule: false是建议的修复方法，但这对我不起作用。
我的解决办法是<img src={require('assets/logo.png').default}/>这很奇怪。第一次使用，.default但有效。
| 归档时间： |
|
| 查看次数： |
34088 次 |
| 最近记录： |