Вы хотите, чтобы ваш код JavaScript был в порядке? Познакомьтесь с Webpack!

В последние несколько лет веб-сайты фактически заменялись приложениями. Это привело к значительному увеличению количества кода JavaScript на стороне клиента проекта. Поддержание порядка в проекте особенно важно для разработчика - часто от него зависит читабельность кода. Один из лучших способов поддерживать порядок в коде JavaScript - разбивать его на модули с помощью Webpack.

Что такое Webpack?

Webpack - это инструмент, который помогает разделить код на модули. Это позволяет легко управлять зависимостями. В результате разработчик может рассматривать приложение как набор независимых модулей, которые позже будут скомпилированы и доставлены в браузер.

Основные предположения Webpack:

поддержание короткого времени загрузки сайта (особенно актуально для крупных проектов);
разделение зависимостей на небольшие части, которые впоследствии можно будет загрузить по запросу;
простая настройка практически любой части инструмента.

Как это работает?

Webpack отвечает за фиксацию зависимостей в проекте и создание статических пакетов с кодом, готовых к загрузке по запросу.

Основные элементы Webpack:

загрузчики - используются для предварительной обработки файлов. Они позволяют объединять статические ресурсы. Можно добавлять собственные загрузчики, написанные на Node.js;
разделение кода - позволяет разделить код на множество частей для последующей асинхронной загрузки во время работы приложения;
оптимизация - оптимизация - важнейший элемент WebPack. Это позволяет уменьшить размер файла JavaScript за счет минификации. Он адаптирует файлы для обновлений кеша с использованием хешей.

Основные команды

webpack

Выполняет все, что включено в файл конфигурации. Создает версию файлов, которые позже используются разработчиками

webpack  -p

Работает аналогично команде webpack с одним отличием - она создает пакет, готовый к использованию в производственной среде.

webpack  -watch

Эта команда создает проект после каждой модификации.

webpack-dev-server

Обслуживает файлы из текущей папки

Установка

Webpack устанавливается через npm (Node Package Manager). Чтобы начать пользоваться WebPack, вам необходимо:

установить WebPack глобально:

npm install webpack -g

создать файл package.json:

npm init

добавить webpack в файл зависимостей package.json:

npm install webpack -- save-dev

создать файл конфигурации (webpack.config.js), например:

module.exports = { entry: './file.js', output: { path: __dirname, filename: 'bundle.js' } };

После выполнения всех этих инструкций Webpack готов к использованию.

Примеры

Давайте создадим простой проект, который будет создавать приложение и обслуживать его через локальный IP-адрес:

Создайте папку, в которой будет храниться приложение, и выполните шаги, описанные в предыдущем разделе об установке Webpack;
Создайте index.html с пустым шаблоном сайта;
Используя строку ‹script src =” bundle.js ”› ‹/script›, добавьте bundle.js в недавно созданный файл index.html:

Создайте styles.css и добавьте стили для тестирования, например:

body {
                    background-color: #d97d34
}

Добавьте файл JavaScript content.js, в который вы должны включить:

function Content() {
    console.log('merix');
}
module.exports = Content;

Добавьте main.js, куда мы позже вставим зависимости, и введите:

require("./style.css");
var Content = require("./content.js");
var content = new Content();

Измените содержимое webpack.config.js на:

var OpenBrowserPlugin = require('open-browser-webpack-plugin');
module.exports = {
    entry: "./main.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loader: "style!css"
        }]
    },
    plugins: [
    new OpenBrowserPlugin({
        url: 'http://localhost:8080'
    })
    ]
};

Установите модуль open-browser-webpack-plugin, который автоматически запускает встроенное приложение в браузере:

npm install  open-browser-webpack-plugin --save-dev

Запустите консоль в папке проекта и введите:

webpack-dev-server

Альтернативные инструменты:

Gulp и Grunt
Самыми популярными инструментами, способными заменить Webpack, являются, прежде всего, gulp и grunt, которые были описаны в одной из наших предыдущих статей: «« Gulp.js - что это все о?"".

Browserify
Browserify позволяет использовать модули CommonJS в браузере. Зависимости определяются разработчиком, а Browserfiy позаботится обо всем остальном - он группирует и объединяет их в один файл JavaScript.
Определение зависимостей в проекте основано на использовании require (‘. YourJsFile.js’). Таким же образом вы можете добавлять модули из node_modules, загруженных через npm.

RequireJS
Этот инструмент использует JavaScript, который отвечает за загрузку модулей. Эта структура была создана с целью использования ее в браузерах, но ее можно успешно использовать в других средах (например, Node.js). RequireJS значительно сокращает время загрузки сайта и повышает качество кода.

Резюме

Webpack - отличный инструмент для управления зависимостями и группировки их в модули, он имеет простую настройку и работает очень быстро. Webpack упрощает интеграцию различных стандартов для определения модулей или компиляции других языков (например, TypeScript) в JavaScript. Он ориентирован на браузеры, но также может использоваться для других областей. Webpack отлично подходит для каждого разработчика, поскольку упрощает их работу - я настоятельно рекомендую его использовать.

Первоначально опубликовано на www.merixstudio.com 15 декабря 2015 г.

Вы хотите, чтобы ваш код JavaScript был в порядке? Познакомьтесь с Webpack!