Я хотел бы использовать Webpack в многостраничном приложении таким образом, чтобы некоторые заранее определенные зависимости были объединены в блок "vendor", а остальные зависимости были объединены в кусок "commons".
Например, если предположить, что две точки входа (фактически представляющие разные страницы каждый), pageA.js и pageB.js содержат оба этих кода (в EC6, обработанных через Babel), а затем их собственный код:
import $ from 'jquery';
require('bootstrap/dist/css/bootstrap.css');
import angular from 'angular';
import uitree from 'angular-ui-tree';
Я хотел бы, чтобы jQuery и Bootstrap были добавлены в блок "vendor", а остальные (что бы это ни было) были добавлены в кусок "commons".
Цели:
- Я хотел бы иметь еще одну отдельную сборку, которая могла бы опираться на тот же кусок поставщика, без необходимости повторного включения библиотек поставщиков (я бы прямо объявлял, что набор библиотек поставщиков, чтобы сделать это доступный для любой подстроки, которая ему нужна).
- Мне также хотелось бы не перерабатывать кусок поставщика каждый раз, когда я делаю изменения на странице script.
Вот конфигурация, которую я пробовал:
module.exports = {
entry : {
"vendor" : [ "jquery", "bootstrap" ],
"pageA" : "./src/pageA.js",
"pageB" : "./src/pageB.js"
},
output : {
path : path.join(__dirname, "./dest"),
filename : "[name].chunk.js"
},
module : {
loaders : [ {
test : /bootstrap\/js\//,
loader : 'imports?jQuery=jquery'
},
/* ... Some modules for angular and CSS processing ... */
{
test : /\.js?$/,
include : [ path.resolve(__dirname, "./src") ],
loader : 'babel',
query : {
presets : [ 'es2015' ]
}
}
/* ... Some other settings for the fonts ... */ ]
},
plugins : [
new webpack.ProvidePlugin({
$ : "jquery",
jQuery : "jquery"
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap : false,
mangle : false,
compress : false
}),
new CommonsChunkPlugin({
name : "vendor",
minChunks : Infinity
}),
new CommonsChunkPlugin({
name : "commons",
minChunks : 2
})
]
};
С приведенной выше конфигурацией я получаю jQuery и Bootstrap в vendor.chunk.js, если требуется, но файл commons.chunk.js почти пуст, все остальные, что обычно используется pageA.js и pageB.js, затем помещаются в pageA.chunk.js и pageB.chunk.js (эффективно дублируя этот код).
Если я поменяю порядок двух последних плагинов, commons.chunk.js теперь содержит почти все (если только то, что действительно специфично для pageA.js и pageB.js), а vendor.chunk.js почти пусто:
plugins : [
// ...,
new CommonsChunkPlugin({
name : "commons",
minChunks : 2
}),
new CommonsChunkPlugin({
name : "vendor",
minChunks : Infinity
})
]
Есть ли способ связать предварительно определенный список библиотек (например, [ "jquery", "jquery-ui", "bootstrap" ] в один конкретный фрагмент (таким образом, чтобы он мог использоваться полностью независимыми скриптами), а также иметь еще один общий фрагмент, обычно используется между точками входа?
Цель всего этого заключалась бы в том, чтобы создать полностью отдельный фрагмент кода для другой страницы позже и сказать, что ему не нужно повторно связывать эти предварительно определенные библиотеки.
Вот диаграмма, показывающая, что я пытаюсь достичь:
Затем я использовал сгенерированные скрипты, как показано ниже на странице A:
<script src="vendor.js"></script>
<script src="common.js"></script>
<script src="pageA.chunk.js"></script>
И на странице C (полностью построен независимо от страниц A и B):
<script src="vendor.js"></script>
<script src="common2.js"></script>
<script src="pageC.chunk.js"></script>
(Я использую Webpack 1.12.14.)
Я пробовал решение, предложенное в единственном ответе. Несмотря на то, что это действительно позволяет отделить кусок поставщика от общего объема, куски поставщика (с тем же определением), сделанные из двух отдельных сборок, вообще не могут быть обменены друг на друга. Это не позволяет использовать только один из этих блоков поставщика в двух сборках (хотя они практически одинаковы).