В мире SPA все уже забыли что есть MPA.
Для всех ренегатов современного фронтенда посвящается мой обзор webpack

Структура каталогов

Для каждой отдельной страницы нам нужен один js файл подгружаемый в конце body. Уясним для себя структуру каталогов.

./assets/js/about/ — каталог с js для страницы about.
./bundle/about.js — собранные все вместе js файлы для страницы about

В каталоге /about будут лежать 2 файла
index.js — главный файл
component1.js — Первый компонент
component2.js — Второй компонент использующий component1

Установка webpack

Выполняем команды:

npm init --yes
npm install webpack --save-dev

У нас появился package.json с прописанной webpack зависимостью в devDependencies.
Открываем package.json и прописываем 2 новые команды

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p",
    "watch": "webpack --watch"
  },

Пока торопится с выполнением команд не стоит.

Создадим конфиг файл

Создаем webpack.config.js со следующим содержанием

var path = require('path');

module.exports = {
    entry: {
        about: "./assets/js/about/",
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, 'bundle')
    }
};

Теперь можем выполнять команду

npm run build

или если хотите что бы сборка происходила при каждом изменение то вводим

npm run watch

Прописываем jQuery в конфиг

Если хотите что бы jQuery грузился без всяких import или require для этого есть плагины в webpack. Но для начала надо установить сам jQuery. Например через npm указав версию 1.12.4

npm install jquery@1.12.4

Теперь прописываем ProvidePlugin с jquery в webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: {
        about: "./assets/js/about/",
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, 'bundle')
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery/dist/jquery.min.js',
            jQuery: 'jquery/dist/jquery.min.js'
        })
    ]
};

У меня прописаны пути ‘jquery/dist/jquery.min.js’, т.к. если прописать просто ‘jquery’ то будет загружаться полная версия.