Jor*_*sco 2 html webpack webpack-html-loader webpack-file-loader webpack-bundle
我计划在一个项目中使用 Webpack，并使用 Html-loader + file-loader 设置工作流程，以获取带有图像动态 src 的生产 html 文件，正如 Colt Steele 在本视频中所教授的那样。这是我的 src/ 文件：
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Popular on Letterboxd</title>
</head>
<body>
<img src="./assets/chira.jpg" />
</body>
</html>
索引.js：
import img from './assets/chira.jpg';
import "./main.css";
和main.css
body {
background-color: darkblue;
}
这些是我的配置文件（我有一个用于开发和生产的个人文件，以及两个共同的配置文件）：
webpack.common.js：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
devtool: "none",
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
],
},
{
test: /\.html$/,
use: ["html-loader"]
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[hash].[ext]',
publicPath: 'assets',
outputPath: 'assets/img'
}
}
]
}
],
},
};
webpack.dev.js：
const path = require('path');
const common = require("./webpack.common");
const merge = require('webpack-merge');
module.exports = merge(common, {
mode: "development",
devServer: {
contentBase: path.join(__dirname, 'src'),
},
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist")
},
});
和 webpack.prod.js：
const path = require('path');
const common = require("./webpack.common");
const merge = require('webpack-merge');
module.exports = merge(common, {
mode: "production",
output: {
filename: "main.[contentHash].js",
path: path.resolve(__dirname, "dist")
},
});
但是，当我运行 npm run build 时，它会执行以下命令：
"build": "webpack --config webpack.prod.js"
我得到了带有 asset/img/[name].[hash].[ext] 的预期 dist 文件夹，但在我的 index.html 中我没有得到预期的 src 标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Popular on Letterboxd</title>
</head>
<body>
<img src="[object Module]" />
<script type="text/javascript" src="main.e55bd4ff82bf2f5cec90.js"></script></body>
</html>
我已经尝试解决这个问题有一段时间了，但我似乎无法在任何地方得到正确的答案，而且到目前为止我尝试过的任何方法都不起作用。如果遇到此问题的任何人都可以解决如何解决该问题，或者如果有人知道问题可能是什么以及我能做什么，我将不胜感激。提前致谢！
小智 5
如果您使用的是 webpack 5或更高版本，file-loader则已弃用。文件加载器文档
您可以使用该模块asset/resource。删除您的file-loader规则并将以下规则添加到 webpack.common.js 中的模块中
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/i,
type: 'asset/resource'
}
]
},
然后添加assetModuleFilename到output你的 webpack.prod.js 中
output: {
assetModuleFilename: "assets/img/[name].[hash][ext]"
}
并将您的html-loader规则保留在 webpack.common.js 中。
参考资源模块
| 归档时间： |
|
| 查看次数： |
4786 次 |
| 最近记录： |