Webpack后端配置，用于在视图模板HTML页面中注入bundle

我试图把所有的js文件打包成一个文件[name][hash].js，CSS和资产也是一样。
我看到所有的编译器都生成了index.html文件。
虽然我所需要的是将生成的css/JS文件注入到我的rust askama index.html文件中。但这个想法适用于任何后端视图引擎，没有插件意味着很多痛苦。
下面是我的webpack.config.js的一个例子，它没有产生我需要的结果，即使html-webpack-plugin在/dist中生成了自己的index.html。

import HtmlWebpackPlugin from 'html-webpack-plugin';

export default {
  mode: 'production',
  entry: '/assets/main.js',
  output: {
    filename: '[name].[contenthash].js',
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: '/templates/index.html' })],
};

字符串
这是我的templates/index.html，它是一个后端文件

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}
    {{ title }}{% endblock %}
  </title>
  {% block head %}{% endblock %}
</head>

<body>
  <div id="app"></div>
  <div id="content">
    {% block content %}
    <p>Dashboard</p>
    {% endblock %}
  </div>
</body>

</html>

型
我搜索了rollup和vite，但这个想法很难，我看到所有这些插件都以自己的方式工作，不容易配置。

您可以使用现代的“html-plugin-webpack-plugin”。该插件解析任何HTML模板中的所有图像，字体，样式，脚本等源文件。解析的引用可以替换为它们的输出文件名或注入HTML模板。
例如，直接在HTML模板中添加样式和脚本源文件：

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}
    {{ title }}{% endblock %}
  </title>

  <!-- specify source files directly in HTML, relative to this file 
       or use webpack alias -->
  <link href="../assets/styles.scss" rel="stylesheet">
  <script src="../assets/main.js" defer="defer"></script>

  {% block head %}{% endblock %}
</head>

<body>
  <div id="app"></div>
  <div id="content">
    {% block content %}
    <p>Dashboard</p>
    {% endblock %}
  </div>

  <!-- source image file relative to this HTML file -->
  <img src="../assets/images/picture.png">
</body>

</html>

字符串

webpack.config.js*

import HtmlBundlerPlugin from 'html-bundler-webpack-plugin';

export default {
  mode: 'production',
  output: {
    // define the `path` as output directory of processed templates, defaults is `dist/`
  },
  plugins: [
    new HtmlBundlerPlugin({
      entry: {
        // define templates here
        // the key is output file path w/o extension, e.g.:
        index: 'templates/index.html', // => dist/index.html
        // - OR -
        'templates/index': 'templates/index.html', // => dist/templates/index.html
      },
      js: {
        // output filename of JavaScript, when inline is false (defaults)
        // filename: '[name].[contenthash:8].js',
        inline: true, // <= inject JS into HTML template
      },
      css: {
        // output filename of CSS, when inline is false (defaults)
        // filename: '[name].[contenthash:8].css',
        inline: true, // <= inject CSS into HTML template
      },
      // defaults used Eta (ESJ like) template engine to render into HTML
      preprocessor: false, // <= disable rendering into HTML to keep original template content
    }),
  ],
  module: {
    rules: [
      {
        test: /\.s?css$/i,
        use: ['css-loader', 'sass-loader'], // <= use SCSS to create one bundle file from many (S)CSS files
      },
      {
        test: /\.(ico|png|jp?g|webp|svg)$/,
        type: 'asset/inline', // <= inline images in their issuers (HTML, CSS)
      },
    ],
  },
};

型
如果您将保留原始模板内容，并且只保留内联JS/CSS/图像，则使用preprocessor: false插件选项禁用渲染。
如果你要将任何模板渲染成HTML，你可以使用一个支持的模板引擎“开箱即用”：Eta，EJS，Handlebars，Nunjucks，LiquidJS。
处理后的模板看起来像：

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}
    {{ title }}{% endblock %}
  </title>

  <style>
    /* inlined CSS */
  </style>

  <script>
    /* inlined JS */
  </script>

  {% block head %}{% endblock %}
</head>

<body>
  <div id="app"></div>
  <div id="content">
    {% block content %}
    <p>Dashboard</p>
    {% endblock %}
  </div>

  <!-- inlined image (can be PNG, JPG, SVG, etc.) -->
  <img src="data:image/png;base64,iVBORw...">
</body>

</html>

型
请参阅：

如何在HTML中内联CSS
如何在HTML中内联JS
如何在HTML中内联图像

P.S.你可以用你的基本项目文件创建一个小的仓库，我可以帮助你配置它。

Webpack后端配置，用于在视图模板HTML页面中注入bundle

1条答案

相关问题

热门标签

最新问答