HtmlWebpackPlugin：尝试在现有的index.html中添加脚本

Question

在 webpack.config.ts 中使用 HtmlWebpackPlugin 作为 -

new HtmlWebpackPlugin({
            template: 'IndexFile/index.html',
            // inject: 'body',
            templateParameters: {
                customScript: `<script src="myscript.js"></script>`
            }
        })

在

index.html

，我有-

<body>
    <%= customScript %>
</body>

我注意到变量没有更新。我是不是做错了什么？

Answer 1

代替

html-webpack-plugin

，您可以使用现代强大的 html-bundler-webpack-plugin。

所有脚本和样式源文件（js、ts、css、scss 等）都可以使用

<script>

和

<link>

标签直接在 HTML 模板中指定。该插件解析模板中资源的源文件，并在生成的 HTML 中将其替换为正确的输出 URL。解析后的资源将通过 Webpack 插件/加载器进行处理并放入输出目录中。

使用捆绑器插件：

入口点是 HTML 模板。
使用
```
<script>
```
和
```
<link>
```
直接在 HTML 中绑定源脚本/样式文件名。
解析属性中指定的源资源文件
```
href
```
```
src
```
```
srcset
```
等
内联 JS、CSS、SVG、PNG，无需额外的插件和加载器。
支持任何模板引擎（Eta、EJS、Handlebars、Nunjucks、LiquidJS 等）。

例如有HTML模板：

<html>
  <head>
    <!-- relative path to SCSS source file -->
    <link href="../scss/style.scss" rel="stylesheet" />
    <!-- relative path to TypeScript source file -->
    <script src="../app/main.js" defer="defer"></script>
  </head>
  <body>
    <h1>Hello World!</h1>
    <!-- relative path to image source file -->
    <img src="../assets/images/picture.png" />
  </body>
</html>

最小 Webpack 配置：

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

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
  },

  plugins: [
    new HtmlBundlerPlugin({
      entry: {
        index: 'src/views/index.html', // save generated HTML into dist/index.html
      },
      js: {
        filename: 'js/[name].[contenthash:8].js', // JS output filename
      },
      css: {
        filename: 'css/[name].[contenthash:8].css', // CSS output filename
      },
    }),
  ],
  
  module: {
      rules: [
        {
          test: /\.s?css$/,
          use: ['css-loader', 'sass-loader'],
        },
        {
          test: /\.(ico|png|jp?g|svg)/,
          type: 'asset/resource',
        },
      ],
    },
};

生成的 HTML 包含资产的哈希输出 URL：

<html>
  <head>
    <link href="css/style.1234abcd.css" rel="stylesheet" />
    <script src="js/main.ab32dc41.js" defer="defer"></script>
  </head>
  <body>
    <h1>Hello World!</h1>
    <img src="ab12cd34.png" />
  </body>
</html>

HtmlWebpackPlugin：尝试在现有的index.html中添加脚本

问题描述投票：0回答：1

1个回答

使用捆绑器插件：

最新问题

HtmlWebpackPlugin：尝试在现有的index.html中添加脚本

问题描述 投票：0回答：1

1个回答

使用捆绑器插件：

最新问题

问题描述投票：0回答：1