webpack html-loader只对index.html文件起作用

我在一个静态网站项目工作，现在必须添加多个页面使用相同的页眉和页脚。我试图通过将header.html和footer.html文件转换为部分文件来实现这一点。
我已经将我的webpack.config.js设置为使用HtmlWebpackPlugin，其中模板是index.html文件。

plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
    ]

字符串
我还调用了index.html文件中的partials，如下所示：

<body>
    <%= require('html-loader!./partials/header.html').default %>
    
    
    <%= require('html-loader!./partials/home.html').default %>

    <%= require('html-loader!./partials/footer.html').default %>
</body>

型
这对索引文件有效。但是现在我必须添加一个portfolio.html页面并重用页眉和页脚。当我以同样的方式调用分部时，它们在HTML页面上呈现为字符串

的数据
有人能帮我一下吗？我不知道如何在其他html页面中重用这些部分。

问题与html-loader无关。您没有使用html-webpack-plugin来处理portfolio.html文件。这个插件默认使用ejs/lodash模板来处理特殊的模板标签<%= >。
请参见生成多个HTML文件：
要生成多个HTML文件，请在plugins数组中多次声明插件
例如：
项目结构（建成后）：

$ tree -L 3 -I node_modules
.
├── dist
│   ├── home.js
│   ├── index.html
│   ├── portfolio.html
│   └── portfolio.js
├── package-lock.json
├── package.json
├── src
│   ├── index.html
│   ├── index.js
│   ├── partials
│   │   ├── footer.html
│   │   ├── header.html
│   │   └── home.html
│   ├── portfolio.html
│   └── portfolio.js
└── webpack.config.js

3 directories, 14 files

字符串
src/index.html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            http-equiv="X-UA-Compatible"
            content="IE=edge"
        />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>index</title>
    </head>
    <body>
    <%= require('html-loader!./partials/header.html').default %>
    <%= require('html-loader!./partials/home.html').default %>
    <%= require('html-loader!./partials/footer.html').default %>
  </body>
</html>

型
src/portfolio.html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>portfolio</title>
    </head>
    <body>
    <%= require('html-loader!./partials/header.html').default %>
    <main>This is portfolio page</main>
    <%= require('html-loader!./partials/footer.html').default %>
  </body>
</html>

型
src/partials/header.html：

<header>This is header</header>

型
src/partials/footer.html：

<footer>This is footer</footer>

型
src/partials/home.html：

<main>This is home page</main>

型
webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'production',
    entry: {
        home: './src/index.js',
        portfolio: './src/portfolio.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'src/index.html',
            chunks: ['home'],
            minify: false,
        }),
        new HtmlWebpackPlugin({
            filename: 'portfolio.html',
            template: 'src/portfolio.html',
            chunks: ['portfolio'],
            minify: false,
        }),
    ],
};

型
构建日志：

> webpack

assets by path *.html 791 bytes
  asset index.html 422 bytes [compared for emit]
  asset portfolio.html 369 bytes [compared for emit]
assets by path *.js 0 bytes
  asset home.js 0 bytes [compared for emit] [minimized] (name: home)
  asset portfolio.js 0 bytes [compared for emit] [minimized] (name: portfolio)
./src/index.js 1 bytes [built] [code generated]
./src/portfolio.js 1 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 277 ms

型

输出

dist/index.html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            http-equiv="X-UA-Compatible"
            content="IE=edge"
        />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>index</title>
    <script defer src="home.js"></script></head>
    <body>
    <header>This is header</header> 
    <main>This is home page</main> 
    <footer>This is footer</footer> 
  </body>
</html>

型
dist/portfolio.html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>portfolio</title>
    <script defer src="portfolio.js"></script></head>
    <body>
    <header>This is header</header> 
    <main>This is portfolio page</main>
    <footer>This is footer</footer> 
  </body>
</html>

型
package.json：

{
    "version": "1.0.0",
    "scripts": {
        "build": "webpack"
    },
    "devDependencies": {
        "html-loader": "^4.2.0",
        "html-webpack-plugin": "^5.5.3",
        "webpack": "^5.80.0",
        "webpack-cli": "^5.0.2"
    }
}

型

webpack html-loader只对index.html文件起作用

1条答案

相关问题

热门标签

最新问答