为了账号安全,请及时绑定邮箱和手机立即绑定

包含在 Webpack 4 中的部分渲染为文字而不是 HTML

包含在 Webpack 4 中的部分渲染为文字而不是 HTML

LEATH 2022-07-21 21:28:17
我试图在我的 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.jsonwebpack.config.jsonconst 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-loaderinterpolate我的下一个问题是在 v1.0.0中我有哪些替代方案?
查看完整描述

1 回答

?
侃侃无极

TA贡献2051条经验 获得超10个赞

我降级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有什么问题


查看完整回答
反对 回复 2022-07-21
  • 1 回答
  • 0 关注
  • 69 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信