在webpack中使用html partials

lskq00tm 于 2023-11-19 发布在 Webpack

关注(0)|答案(1)|浏览(152)

我在JS和webpack方面是个新手，我正在尝试在我的项目中使用partials作为页眉和页脚，以免到处重复。
我的第一个方法是安装html-loader并在index.html中使用：

<%= require('html-loader!./assets/html/header.html') %>

字符串
它是工作的，只有当我不添加任何规则的html文件在webpack配置（我想如果我这样做，它干扰与HtmlWebpackPlugin），但是，我的页面呈现：

[object Module]

型
我在网上找不到任何好的解释（与html文件案例有关）。
我有一个很好的方法，或者有另一种更简单的方法来做到这一点？我将包括这些分部无处不在，但我不排除创建分部的东西，我想在特定的页面中使用。

webpack

来源：https://stackoverflow.com/questions/77355154/using-html-partials-with-webpack

1条答案

按热度按时间

vlju58qv1#

更简单的方法是使用html-webpack-plugin。这个插件支持许多模板引擎（Eta，EJS，Handlebars，Nunjucks，LiquidJS）“开箱即用”。默认的模板引擎是最快的Eta（类似EJS）。
简单的用法，干净的语法，例如，./src/views/index.html

<html>
  <head>
    <!-- specify a source style file, relative to html file -->
    <link href="../scss/styles.scss" rel="stylesheet" />
    <!-- specify a source script file, relative to html file -->
    <script src="../js/main.js" defer="defer"></script>
  </head>
  <body>
    <!-- specify a source partial file, relative to project path -->
    <%~ include('/src/views/header.html') %>
    <h1>Hello World!</h1>
    <!-- specify a source image file, relative to html file -->
    <img src="../images/picture.png" />
    <!-- specify a source partial file, relative to project path -->
    <%~ include('/src/views/footer.html') %>
  </body>
</html>

字符串
最小的Webpack配置：

const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
module.exports = {
  plugins: [
    new HtmlBundlerPlugin({
      entry: {
        // define templates here
        index: './src/views/index.html', // => dist/index.html
      },
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(css|sass|scss)$/,
        use: ['css-loader', 'sass-loader'],
      },
      {
        test: /\.(ico|png|jp?g|webp|svg)$/,
        type: 'asset/resource',
        generator: {
          filename: 'img/[name].[hash:8][ext]',
        },
      },
    ],
  },
};

型

注意入口是一个HTML文件，所有的源脚本和样式文件都应该直接在HTML中指定，插件会解析HTML模板中的所有源文件，并在生成的HTML中将引用替换为它们的输出文件名。

不需要额外的插件和加载器。

展开查看全部

赞(0）回复(0）举报 2023-11-19

我来回答

在webpack中使用html partials

1条答案

相关问题

热门标签

最新问答