包含在 Webpack 4 中的部分渲染为文字而不是 HTML
我试图在我的 index.html 中包含一个 header.html，作为部分通过html-loader但 header.html 呈现为文字文本而不是 HTML。使用此处和此处提到的插值似乎适用于 Webpack v2。我还注意到html-loader URL中的#interpolate 哈希不起作用；意味着从 Webpack v4 开始 interpolate 已失效？如果我包含选项，Webpack 会发出关于无效选项对象的错误：{ interpolate: true }
树
--dist
--node_modules
--src
----js
------index.js
----partials
------header.html
--templates
----index.html
--package.json
--webpack.config.json
webpack.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",
}
}
}
},
索引.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
所以我认为这在这个答案的interpolatev1.0.0 中不起作用html-loader
interpolate我的下一个问题是在 v1.0.0中我有哪些替代方案？
LEATH1回答
-
侃侃无极
我降级html-loader到 v0.5.5，因为interpolate选项不适用于html-loaderv1.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-pluginv3.2.0 的 .html 格式的部分，我降级到但仍然没有工作。我不知道为什么它没有工作）我还冒昧地按照@IVO html-loaderGELOV 的建议升级到 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有什么问题
随时随地看视频慕课网APP
相关分类
JavaScript