在Webpack 4中包含了部分，以文字文本形式呈现，而不是HTML。
在Webpack 4中包含了部分，以文字文本形式呈现，而不是HTML。
提问于 2020-04-29 05:37:48
我正试图在我的index.html中包含一个index.html，作为通过html加载程序的部分，但是header.html将呈现为文字文本而不是HTML。使用插值，如这里和这里，似乎适用于Webpack v2。我还注意到html加载程序URL中的#内插散列不起作用，意思是内插在Webpack v4的时候就失效了？如果我包括options：{ interpolate: true }，Webpack会发出一个关于无效options对象的错误
树
--dist
--node_modules
--src
----js
------index.js
----partials
------header.html
--templates
----index.html
--package.json
--webpack.config.jsonwebpack.config.json
const path = require("path"),
webpack = require('webpack'),
{ CleanWebpackPlugin } = require("clean-webpack-plugin"),
HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "development",
entry: {
index: "./src/js/index.js"
},
plugins: [
// new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: "Home",
filename: "index.html",
template: "templates/index.html",
inject: true,
minify: true
})
],
devtool: "source-map",
devServer: {
contentBase: "./dist"
},
output: {
// filename: "[name].bundle.js",
filename: "[name].[contenthash].js",
path: path.resolve(__dirname, "dist"),
// publicPath: "/"
},
optimization: {
moduleIds: "hashed",
runtimeChunk: "single",
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: "all",
}
}
}
},
module: {
rules: [
{
test: /\.(html)$/,
loader: "html-loader",
options: {
minimize: true
}
}
]
}
}index.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<%= require("html-loader!./src/partials/header.html") %>
</body>
</html>编辑1
因此，我认为interpolate在html-loader basis 这个答案的1.0.0版本中不起作用
我的下一个问题是，在1.0.0版中，我有哪些替代interpolate的方法？
Stack Overflow用户
回答已采纳
发布于 2020-05-03 08:59:36
我将html-loader降级为v0.5.5，因为interpolate选项没有使用html-loader v1.0.0。另外，我将index.html更改为
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<%= require("html-loader!../src/partials/header.ejs") %>
</body>
</html>初始<%= require(...) %>中的路径是错误的。我想知道是不是打错了。我还将分部从一个.html改为了.ejs (在html-webpack-plugin v3.2.0中使用了.html格式的实现，我将其降级到了这个格式，但仍然没有工作。我不知道为什么不起作用)
我还冒昧地按照@IVO的建议，将html-loader升级为v1.1.0，使我的package.json看起来如下：
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"csv-loader": "^3.0.3",
"express": "^4.17.1",
"file-loader": "^6.0.0",
"html-loader": "^1.1.0",
"html-webpack-plugin": "^4.3.0",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11",
"webpack-dev-middleware": "^3.7.2",
"webpack-dev-server": "^3.10.3",
"xml-loader": "^1.2.1"
},插值起作用了。不确定html-loader v1.0.0有什么问题
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61494966
复制相关文章
相似问题
腾讯云开发者
