Webpack HtmlWebpackPlugin生成错误的src路径

Question

我正在尝试用Typo3安装来安装Webpack5。。。到目前为止还不错。一切都很好，但使用HTML加载器在HTML文件中构建图像路径的过程。我想我必须将html加载程序设置为忽略构建时的路径。因为如果我在typep3conf/ext/sitepackage/Resources/Public/Images/4.png上的模板中设置路径，Webpack在构建时找不到文件

我的HTML文件中的ImagePath是：

../../../../../../public/typo3conf/ext/sitepackage/Resources/Public/Images/4.png

构建后的路径过程：

../../../../../Public/Dist/Images/4dbd2c58e6e057af018e.png

但应该是：

./typo3conf/ext/sitepackage/Resources/Public/Dist/Images/4dbd2c58e6e057af018e.png

我的webpack配置

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './JavaScript/Src/main.js',
mode: "development",
output: {
filename: 'JavaScript/bundle.js',
path: path.resolve(__dirname, 'Dist'),
clean: true,
assetModuleFilename: 'Images/[name].[ext]'
},
module: {
rules: [

{
test: /.(s(a|c)ss)$/, 
exclude: /node_modules/,
use: [MiniCssExtractPlugin.loader,'css-loader', 'sass-loader']
},
{
test: /.(woff(2)?|eot|ttf|otf|svg|)$/,
type: 'asset',   // <-- Assets module - asset
parser: {
dataUrlCondition: {
maxSize: 8 * 1024 // 8kb
}
},
generator: {  //If emitting file, the file path is
filename: 'Fonts/[hash][ext][query]' 
}
},
{
test: /.(?:ico|gif|png|jpg|jpeg|webp)$/i,
type: 'asset/resource',  //<-- Assets module - asset/resource
generator: {
filename: 'Images/[hash][ext][query]'
} 
},
{
test: /.html$/i,
loader: "html-loader",
options: {}, 
},
],

},
plugins: [
new HtmlWebpackPlugin({
template: '../Private/Partials/Page/Header.html',
filename: '../../Private/Dist/Html/Partials/Page/Header.html',
inject:false
}),
new HtmlWebpackPlugin({
template: '../Private/Partials/Page/Footer.html',
filename: '../../Private/Dist/Html/Partials/Page/Footer.html',
inject:false
}),
new HtmlWebpackPlugin({
template: '../Private/Layouts/Page/Default.html',
filename: '../../Private/Dist/Html/Layouts/Page/Default.html',
inject:false
}),
new HtmlWebpackPlugin({
template: '../Private/Templates/Page/Default.html',
filename: '../../Private/Dist/Html/Templates/Page/Default.html',
inject:false
}),
new MiniCssExtractPlugin ({filename: "../Dist/Css/[name].css" })
],


};

我如何才能实现Webpack使用正确的src路径处理我的HTML文件和图像？或者在构建时/之后操作src路径

Answer 1

如果使用模板，则模板的路径在前端(或后端(不可用，因为它在php文件中用作数据。如果你在模板的relativ路径中包含一些东西(脚本、图像…(，它会指向涅盘。

具有绝对路径(从域根(或使用viewhelper在适当的标记中生成适当的路径。