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

问：

我正在尝试将所有 js 文件捆绑到一个文件中，CSS 和资产也是如此。有些东西和 .[name][hash].jslaravel-mix

我看到所有打包器都生成了他们的文件。index.html

而我所需要的只是将生成的 css/JS 文件注入我的 rust askama 文件中。但是这个想法适用于任何后端视图引擎，没有插件意味着很多痛苦。index.html

这是我的一个例子，它不会产生我需要的结果，即使它生成了自己的结果。webpack.config.jshtml-webpack-pluginindex.html/dist

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，但这个想法很困难，我看到所有这些打包器都以不容易配置的方式工作。

Webpack Rust Vite 汇总

<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>

看：

P.S. 您可以使用您的基本项目文件创建一个小型存储库，我可以帮助您配置它。

上一个：添加 css 以使用 rollup 进行构建

下一个：在“react-module”中找不到导出“default”（模块没有导出）

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

Webpack backend configuration to inject the bundles in a view template HTML page

评论