Как отделить webpack-dev-сервер от моих splitChunks в Webpack?

Я пытаюсь заставить несколько точек входа работать с webpackDevServer.

Для одной точки входа требуется вся моя папка node_modules. Другой требует только один файл с единственным console.info в нем (файл точки входа).

По какой-то причине мой единственный файл с единственным console.info не запускается. См. Также этот вопрос.

Я тестировал эту настройку в WebpackDevServer, поэтому подозревал, что, возможно, для работы всех файлов требуется хотя бы WebpackDevServer. Итак, я изменил свой optimization.splitChunks, чтобы он выглядел так, на основе примера в документации веб-пакета:

optimization: {
    splitChunks: {
        cacheGroups: {
            commons: {
                test: /[\/]node_modules[\/]/,
                name: 'vendor',
                chunks: 'all'
            },
            vendor: {
                test: /[\/]node_modules[\/](webpack|webpack-dev-server)[\/]/,
                name: 'webpack',
                chunks: 'all',
            }
        }
    },
},

Я ожидаю, что будут комплекты «поставщик» и «веб-пакет». Есть только «продавец» (и мои точки входа):

                                         app.js   6.92 MiB            app  [emitted]  app
                               resetPassword.js   35.2 KiB  resetPassword  [emitted]  resetPassword
                                      vendor.js   14.4 MiB         vendor  [emitted]  vendor

Как я могу получить webpack-dev-server в отдельном комплекте, который я затем могу включить в HtmlWebpackPlugin, чтобы проверить, нужны ли этот (или другие node_modules) для работы моего console.info?

Конфигурация Webpack

module.exports = {
    entry: {
        app: './public/js/ide.js',
        resetPassword: './public/js/reset_password.js'
    },
    output: {
        path: path.resolve(__dirname, '../build'),
        filename: '[name].js',
        publicPath: '/'
    },
    ...
optimization: {
    splitChunks: {
        cacheGroups: {
            commons: {
                test: /[\/]node_modules[\/]/,
                name: 'vendor',
                chunks: 'all'
            },
            vendor: {
                test: /[\/]node_modules[\/](webpack|webpack-dev-server)[\/]/,
                name: 'webpack',
                chunks: 'all',
            }
        }
    },
},
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'public/html/ide.html',
            inject: true,
            chunks: ['app', 'vendor']
        }),
        new HtmlWebpackPlugin({
            filename: 'reset_password.html',
            template: 'public/html/reset_password.html',
            inject: true,
            chunks: ['resetPassword'] // this does not work
            //chunks: ['resetPassword', 'vendor'] //this works
        }),
    ],
}

reset_password.js

console.info('hello') 

конфигурация сервера webpack dev

devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: true,
    hot: true,
    compress: true,
    host: HOST,
    port: PORT,
    open: config.dev.autoOpenBrowser,
    overlay: false,
    publicPath: '/',
    contentBase: [
        path.join(__dirname, "../../public"), 
        path.join(__dirname, "../../public/js")],
    watchOptions: {
        poll: config.dev.poll,
    },
    disableHostCheck: true,
    https: true,
    noInfo: false,
},
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
827
1

Ответы 1

Добавьте атрибут приоритета к каждому из блоков. Из каталога документы.

splitChunks.cacheGroups.priority

number

A module can belong to multiple cache groups. The optimization will prefer the cache group with a higher priority. The default groups have a negative priority to allow custom groups to take higher priority (default value is 0 for custom groups).

Итак, ваш код будет примерно таким. Обратите внимание, что приоритетом является максимальное числовое значение, а не значение ранжирования.

optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        test: /[\/]node_modules[\/]/,
        name: 'vendor',
        chunks: 'all',
        priority: 1
      },
      vendor: {
        test: /[\/]node_modules[\/](webpack|webpack-dev-server)[\/]/,
        name: 'webpack',
        chunks: 'all',
        priority: 2
      }
    }
  },
},

Другие вопросы по теме