Предположим, у вас есть проект ниже:
package.json
{
"name": "webpack-test-repo",
"main": "index.js",
"dependencies": {
"define-properties": "^1.1.3"
},
"devDependencies": {
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
}
}
index.js
// dynamically load the 'define-properties' module.
import('define-properties');
webpack.config.js
module.exports = {
mode: 'production',
entry: './index.js',
output: {
chunkFilename: '[name].js',
},
optimization: {
splitChunks: {
minSize: 0, // <- just to demonstrate the situation with small packages
cacheGroups: {
defineProperties: {
test: /node_modules\/define-properties\//,
name: 'define-properties',
},
},
},
},
};
Обратите внимание, что импортированный модуль define-properties имеет одну зависимость object-keys .
Я настроил splitChunks
в webpack.config.js так, чтобы содержимое define-properties
было разбито на define-properties.js
.
Результат запуска веб-пакета следующий:
$ npx webpack
Hash: 7d9500fb0e6bfd1e32d1
Version: webpack 4.20.2
Time: 127ms
Built at: 2018-10-08 03:25:47
Asset Size Chunks Chunk Names
main.js 2.05 KiB 0 [emitted] main
define-properties.js 754 bytes 1 [emitted] define-properties
2.js 2.08 KiB 2 [emitted]
Entrypoint main = main.js
[0] ./index.js 81 bytes {0} [built]
+ 3 hidden modules
Здесь мы получаем три выходных файла: main.js
для содержимого index.js
, define-properties.js
для модуля define-properties
и 2.js
для модуля object-keys
.
Вопрос :
Я хочу, чтобы фрагмент для object-keys
был объединен в define-properties
, потому что он используется только define-properties
.
Другими словами, яхочу упаковать define-properties
и его зависимости в один именованный блок, указав только родительский модуль.
Хотя test: /node_modules\/(?:define-properties|object-keys)\//
работает для этого примера, я не хочу перечислять все (потенциально многие) зависимости define-properties
.
HКак мне настроить webpack для его достижения?