Я пытаюсь включить заголовок. html в свой индекс. html, как частичный с помощью html -loader , но заголовок. html вместо этого выводится как текстовый текст HTML. Использование интерполяции, как упомянуто здесь и здесь , кажется применимым к Webpack v2. Я также заметил, что #interpolate ha sh в html -loader URL не работает; смысл интерполяции не существует в Webpack v4? Webpack выдает ошибку об объекте Invalid options , если я включаю параметры: { interpolate: true }
Tree
--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",
}
}
}
},
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>
Edit 1
Итак, я решил, что interpolate не работает в v1.0.0 из html-loader базис этот ответ
Мой следующий вопрос будет о том, какие альтернативы у меня есть вместо interpolate в v1.0.0?