Изменить URL-адреса сгенерированных скриптов HtmlWebpackPlugin - PullRequest
Новая
       10

Изменить URL-адреса сгенерированных скриптов HtmlWebpackPlugin

0 голосов
/ 17 ноября 2018

При использовании HtmlWebpackPlugin для генерации файла dist / index.html мы можем использовать опцию inject для автоматического создания <script> тегов для файлов комплекта javascript : 

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>. Я искал документацию к плагину 1014 *, но не могу найти способ сделать это.

Существует ли какая-либо опция для изменения сгенерированных URL путем добавления строки или замены на RegEx?

Заранее спасибо!

Ответы [ 3 ]

0 голосов
/ 18 ноября 2018

Рассматривали ли вы сделать это самостоятельно, предоставив свой собственный шаблон для 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>
0 голосов
/ 22 ноября 2018

Основываясь на ответе thedarkone , я предоставляю разрешение для моего вопроса:

Я добавил параметр запроса в выходной параметр конфигурации веб-пакета (производственная сборка только в моем случае) и использую 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'),
})
// ...

Имейте в виду, что этот подход добавит параметры запроса ко ВСЕМ внедренным сценариям / стилям .

0 голосов
/ 17 ноября 2018 
output: {
    filename: `bundle.js?param=${Math.random()}`
}

Это добавит параметр запроса в bundle.js

Имя файла будет переименовано в bundle.js, хотя

Если вы хотите создавать новый файл каждый раз, лучше подойдет нижеприведенное 

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