修改 HtmlWebpackPlugin 生成的脚本 URL

Question

当使用HtmlWebpackPlugin生成dist/index.html文件时，我们可以使用inject选项自动为javascript创建<script>标签] 捆绑文件:

new HtmlWebpackPlugin({
    filename: config.build.index,
    template: 'index.html',
    inject: true,
    // ...
})

并得到一个 index.html 类似于以下内容的文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Webpack App</title>
    </head>
    <body>
        <script src="index_bundle.js"></script>
    </body>
</html>

对于服务器端约束，我需要在生成的脚本源中添加一个查询字符串参数，使其看起来像<script src="index_bundle.js?my-parameter=my-value"></script>。我一直在看 plugin documentation，但找不到方法。

是否有任何选项来修改生成的 URL，方法是附加字符串或用 RegEx 替换？

提前致谢！

Answer 1

output: {
    filename: `bundle.js?param=${Math.random()}`
}

这会将查询参数添加到 bundle.js

文件名将重命名为 bundle.js 虽然

如果你想每次都生成一个新文件，下面的会更适合

output: {
    filename: 'bundle.[chunkhash].js'
}

Answer 2

您是否考虑过向 HtmlWebpackPlugin 提供您自己的模板来实现这一点？它看起来像这样：

在webpack.config.js中：

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

module.exports = () => ({
  entry: './burrito.js',
  output: {
    filename: './burrito_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'lunch.ejs',
      templateParameters: {
        query: '?foo=bar&bar=baz'
      },
      filename: 'lunch.html',
      inject: false,
    }),
  ],
});

在lunch.ejs中：

<html>
  <body>
    <% htmlWebpackPlugin.files.js.forEach(function(file) { %>
      <script src="<%= file %><%= htmlWebpackPlugin.options.templateParameters.query %>"></script>
    <% }) %>
  </body>
</html>

HtmlWebpackPlugin 将为您的模板公开一个全局变量 htmlWebpackPlugin 以从中读取值。比照。 https://github.com/jantimon/html-webpack-plugin#writing-your-own-templates

当你运行 Webpack 时，它会处理你的 lunch.ejs 模板并生成 lunch.html:

<html>
  <body>
    <script src="./burrito_bundle.js?foo=bar&bar=baz"></script>
  </body>
</html>

Answer 3

根据thedarkone的回答，我提供了我的问题的解决方案：

我在 webpack 配置输出参数中添加了查询参数（仅在我的情况下是生产构建）并使用默认配置的 HtmlWebpackPlugin：

const webpackConfig = merge(baseWebpackConfig, {
    // ...
    output: {
        path: config.build.assetsRoot,
        filename: utils.assetsPath('js/[name].js?my-parameter=my-value'),
    },
    // ...
    new HtmlWebpackPlugin({
        filename: config.build.index,
        template: 'index.html',
        inject: true,
        // ...
    }
    // ...
}

因为我还需要样式链接中的查询参数，所以我也必须以同样的方式修改 ExtractTextPlugin 文件名参数：

// ...
new ExtractTextPlugin({
    filename: 'bundle.[chunkhash].js'
    filename: utils.assetsPath('css/[name].css?my-parameter=my-value'),
})
// ...

请记住，此方法将将查询参数附加到所有注入的scripts/styles。

修改 HtmlWebpackPlugin 生成的脚本 URL

Modify HtmlWebpackPlugin's generated script URLs

javascript

webpack

html-webpack-plugin