В этой статье я бы хотел поделиться своим опытом по разбиению бандлов для многостраничного сайта с помощью Webpack 4. Cначала создадим для каждой страницы свою точку входа. Рассмотрим на примере 4 страниц:
const path = require("path");
const PATHS = {
src: path.resolve(process.cwd(), "src"),
dist: path.resolve(process.cwd(), "dist")
};
module.exports = {
entry: {
common: `${PATHS.src}/js/common`,
index: `${PATHS.src}/js/index`,
contacts: `${PATHS.src}/js/contacts`,
about: `${PATHS.src}/js/about`,
}
}При сборке для каждой страницы будет создан свой бандл. В точку входа common я вынес общие скрипты для всех страниц. Чтобы подключить наши бандлы на страницы воспользуемся плагином Webpack'a HtmlWebpackPlugin.
Рассмотрим на примере:
module.exports = {
...
plugins: [
new HtmlWebpackPlugin({
filename: `${PATHS.dist}/index.html`,
template: `${PATHS.dist}/index.html`,
chunks: ["index", "common"]
})
...
]
...
};
![[в закладки] PDF-версия руководства по Node.js и новое руководство по JavaScript - 2](https://www.pvsm.ru/images/2018/11/08/v-zakladki-PDF-versiya-rukovodstva-po-Node-js-i-novoe-rukovodstvo-po-JavaScript-2.png "[в закладки] PDF-версия руководства по Node.js и новое руководство по JavaScript - 2")
