В мире 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’ то будет загружаться полная версия.