Могу ли я настроить тег "скрипт", вставляемый в WebPack?

Question

Так что я новичок в вебпаке, но много читаю.

Есть одна задача, которую я пытаюсь выяснить, выполнимо ли это с текущим кодом (включая плагины и т. Д.). Мы используем HtmlWebpackPlugin и предоставляем его с пользовательским шаблоном, прося его вставить тег сценария рядом с закрывающим тегом body. Это прекрасно работает, но мы хотим контролировать тег, который вводится в HTML-шаблон. Используемый тег по умолчанию:

<script src="/bundle.js"></script>

Мы хотим иметь пользовательский контент тега скрипта вместо простого тега скрипта, например:

<script type="text/javascript">
    var bundleUrl;
    if( document.cookie.indexOf('LOCALHOST=')== -1 ){
        bundleUrl="/bundle.js"; // just an example...
    } else {
        bundleUrl = "http://localhost:8080/42565632a54c11195088 .bundle.js"; // use localhost source...
    }
    document.write(unescape('%3Cscript src="' + bundleUrl + '"%3E%3C/script%3E'));
</script>

вышеупомянутое позволит динамически измененный bundleUrl, который изменяется во время выполнения в соответствии с наличием файла cookie.

Причина, по которой вышеприведенное не может быть жестко закодировано в шаблоне, заключается в том, что в производственной среде пакет имеет префикс хеша....

Единственный способ, которым я знаю, что мы можем достигнуть этого, является расширение HtmlWebpackPlugin, но это менее обслуживаемо.

Предложения?

ТИА!

Временное решение

Не самая красивая, но это работает. В итоге я просто опустошил раздел 'chunks' и вставил в шаблон мой жестко закодированный тег сценария. Вот так:

plugins: [
  new HtmlWebpackPlugin({
    inject:   'body',
    template: 'my-template.html',
    filename: 'index.html',
    chunks: []
})

Это эффективно заставляет HtmlWebpackPlugin брать исходный шаблон и преобразовывать его, ничего не меняя внутри, но просто помещая его как index.html, как требуется (наша среда немного сложнее).

Answer 1

Я использую HtmlWebpackPlugin, внедряющий скрипт в мой html, чтобы контролировать, что я рекомендую вам создать его непосредственно из webpack.config, используя переменную окружения узла, это действительно просто и намного более эффективно.

В вашей консоли используйте:

Mac: export NODE_ENV=production

Windows: set NODE_ENV=production

В вашем веб-пакете добавьте:

var PROD = process.env.NODE_ENV == 'production';

И в выводе вы можете использовать это:

 output: {
    filename: PROD ? "[name].min.js" : "[name].js",
  },

В ваш package.json добавьте теги scripts, просто обязательно используйте ваши команды сборки здесь:

  "scripts": {
    "watch": "set NODE_ENV=development&&webpack --progress --colors --watch",
    "deploy": "set NODE_ENV=production&&webpack -p"
  },

Для выпуска Prod я рекомендую вам проверить UglifyJsPlugin.

В моем ответе вы можете найти другую ссылку: почему мои webpack bundle.js и vendor.bundle.js такие невероятно большие?

Answer 2

Какой язык шаблонов вы используете? Я не уверен в ваших требованиях к файлам cookie, но в итоге я нашел это в своем шаблоне:

{! cant have the hash here when using HMR !}
<script src="js/main{?config.fileHash}.{config.fileHash}{/config.fileHash}.js"></script>

..ie, если config.fileHash существует, распечатать его, если нет, то не

Это использует синтаксис шаблона Dust.js, но я уверен, что вы могли бы сделать что-то подобное в других.

в моем роутере:

router.templateConfig = {
  fileHash: null,
};

FileHash записывается в этот конфиг на сборке prod:

router.templateConfig.fileHash = stats.toJson().hash;

(Я использовал один хеш для всех ресурсов, но вы, вероятно, могли бы использовать ту же технику для хешей для каждого чанка, попробуйте войти в console.log(stats.toJson())