包含在 Webpack 4 中的部分呈現為文字而不是 HTML

Question

I'm trying to include a header.html in my index.html, as a partial via html-loader but header.html is rendering as literal text instead of HTML. 使用此處和此處提到的插值似乎適用於 Webpack v2。 我還注意到html-loader URL中的#interpolate hash 不起作用； 意味着從 Webpack v4 開始，插值已失效？ Webpack 如果我包含選項，則會發出有關無效選項 object的錯誤： { 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",
               }
            }
        }
    },
    module: {
        rules: [
            {
                test: /\.(html)$/,
                loader: "html-loader",
                options: {
                   minimize: true
                }
            }
        ]
    }
}

索引.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的 v1.0.0 中不起作用，基於這個答案

我的下一個問題是在 v1.0.0 中我有什么替代方案來代替interpolate ？

Answer 1

我將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(...) %>中的路徑是錯誤的。 我想知道那是不是筆誤。 我還將部分從 a.html 更改為 .ejs （實時的實現在html-webpack-plugin v3.2.0 的.html 格式中有部分，我降級到但仍然沒有工作。我不知道為什么它不起作用）

我還冒昧地將html-loader升級到 v1.1.0，正如@IVO GELOV 所建議的那樣，我的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 有什么問題

包含在 Webpack 4 中的部分呈現為文字而不是 HTML

問題描述

1 個解決方案

解決方案1
0 已采納 2020-05-03 08:59:36

包含在 Webpack 4 中的部分呈現為文字而不是 HTML

問題描述

1 個解決方案

解決方案1 0 已采納 2020-05-03 08:59:36

解決方案1
0 已采納 2020-05-03 08:59:36