Webpack - Как включить файлы чанка в HTML? - PullRequest
Новая
       7

Webpack - Как включить файлы чанка в HTML?

1 голос
/ 16 октября 2019

Я создаю реактивный проект и запускаю производство, используя экспресс.

Это работа, но на следующем шаге я использую оптимизацию.splitChunks с веб-пакетом. 

optimization: {
    runtimeChunk: 'single',
    splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 0,
        cacheGroups: {
            vendor: {
                test: /[\\/]node_modules[\\/]/,
                name(module) {
                    // get the name. E.g. node_modules/packageName/not/this/part.js
                    // or node_modules/packageName
                    const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

                    // npm package names are URL-safe, but some servers don't like @ symbols
                    return `npm.${packageName.replace('@', '')}`;
                }
            }
        }
    }
}

Теперь яесть несколько расслоений. Например, main.cb042e4a129acc79cfb4.js, npm.axios.fa2892d5344ea2c206bf.js и т. Д.

Итак, как мне теперь редактировать эту строку в index.html? как включить эти файлы в index.html? 

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

1 Ответ

0 голосов
/ 16 октября 2019

Когда ваша сборка Webpack выплевывает пакеты / порции с хэшированными идентификаторами - и вы не используете такие инструменты, как, например, HtmlWebpackPlugin - вам понадобится какое-то сопоставление source => bundle.

Я использую WebpackManifestPlugin для этого, но не с Express.

Суть в том, что при запуске сервера вам нужно будет прочитать этот файл manifest.json и создать что-то вроде <script src="{{vendorpath}}"></script>динамически из сопоставлений в этом файле.

...