Как с помощью Webpack с CommonsChunkPlugin разделить код по страничным бандлам?

Question

[Константин]

Проект не одностраниченое приложения. Навигация между страницами реализована через window.location.href из-за большого количества страниц и тяжело яваскрипта.

Я пытаюсь сконфигурить webpack с CommonsChunkPlugin но никак не могу заставить выдялить его страничный код в отдельные файлы.

У меня есть такие файлы:

client.js - общий js
routes.js - определяет где мы находимся и подключает нужный файл из /routes/
routes/Index.js - роута главной страницы
routes/Search.js - роута страницы поиска
routes/Buying.js - роута страницы покупки

Цель разделить файлы из /routes/ по бандлам. Сейчас вебпак пихает всё в routes.js.

Последний конфиг такой:

getConfig: function(routes) {
    return {
        cache: false,
        output: {
            filename: '[name].js'
        },
        entry: {
            client: './source/js/client.js',
            routes: './source/js/routes.js',
            Index: './source/js/routes/Index.js',
            Search: './source/js/routes/Search.js',
            Buying: './source/js/routes/Buying.js',
            vendor: ['...']
        },
        module: {
            loaders: [...]
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
        ]
    }
}

С этим конфигом я получаю ошибку "Error: a dependency to an entry point is not allowed". Я пробовал использовать [ ] как написано тут https://github.com/webpack/webpack/issues/300 но я всё равно получаю routes.js со всеми роутами (Index, Search, Buying) и отдельные файлы Index, Search, Buying которые почти такие же как и routes.js.

Я пытался читать документацию но до сих пор не могу понять как именно мне надо написать конфиг чтобы достичь цели.

Answer 1

[Roman_Kh]

Потому что vendor не должен быть в entry, если вы хотите, чтобы он стал единой сборкой общего кода.

А вообще, лучший туториал по Webpack - https://www.youtube.com/playlist?list=PLDyvV36pndZ... - с разнообразными примерами и подробными пояснениями.
Смотрите видео с 3.1 по 3.6 - это займет 20 минут, зато все станет понятно.

Comments

[Константин]

Я посмотрел ролики. Но всё равно что-то не догоняю, можно Вас попросить мне немного помочь?
Суть в том, что в примере у чувака есть код в файла home и about в них же подключается welcome
У меня же наоборот. Есть лоадер, routes который подключает home и about

[Roman_Kh]

Если у ваших home и about есть общий код, то он может быть выделен в отдельный модуль. Если же у них общего кода нет, то и выделять нечего.
Попробуйте нарисовать дерево зависимостей, а также диаграмму Эйлера-Венна, чтобы понять, какие конкретно части вашего кода могут войти в общий модуль.
При этом помните про параметр minChunks, поскольку по умолчанию плагин выделяет в общий модуль только код, который используется во всех точках входа, а это значит, что возможно, что у вас вообще такого кода нет.

[Константин]

Roman_Kh:
routes - лоадер, у него пара зависимостей которые нужно включить в бандл
vendor надо выделить в отдельный файл, там библиотеки которые используются везде.
всё остальное надо разбить на отдельные файлы
index.js - страничный контроллер со всеми своими зависимостями
search.js - страничный контроллер со всеми своими зависимостями

index и search не зависят от routes но зависят от vendor
routes не зависит ни от кого, кроме vendor и пары конфигов которые в него можно включить
index и search при этом могут использовать похожие модули, и даже совпадать на 90% но они всё равно должны быть разными файлами со всеми зависимостями

Я вот написал, и понимаю что задача-то простая по сути. Но решить не могу.

[Константин]

В общем свою проблему я решил с помощью bundle-loader
Единственное что, он генерит файлы вида route-2.js и догружает их потом сам.
Может быть Вы знаете метод как генерить им имена по именам исходных файлов и загружать самому?

[Roman_Kh]

Константин: Так у него ведь есть параметр name, который поддерживает стандартный синтаксис вида "[name].[ext]". См. https://github.com/webpack/loader-utils#interpolatename

[Константин]

Проблема только в том, что вот такая конструкция не срабатывает require('bundle?name=' + componentName + '!./routes/' + componentName)

[Константин]

Константин: Потому что я вася. Вот так всё работает.
require('bundle?name=[name]!./routes/' + componentName)
Спасибо за помощь, Роман.