Я пытаюсь заставить несколько точек входа работать с 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,
},



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Добавьте атрибут приоритета к каждому из блоков. Из каталога документы.
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
}
}
},
},