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，但找不到解决方法。

是否有任何选项通过添加字符串或用RegEx替换来修改生成的URL？

谢谢！

Answer 1

您是否考虑过通过向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，供您的模板读取值。 cf. 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 2

根据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'),
})
// ...

请记住，这种方法将将查询参数附加到所有注入的脚本/样式。

Answer 3

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

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

该文件名将重命名为bundle.js

如果您想每次生成一个新文件，以下内容将更适合

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

修改HtmlWebpackPlugin的生成的脚本URL

3 个答案: