Краткое введение в webpack для новичка

Если вы занимаетесь разработкой приложений JavaScript, возможно, вы недавно слышали слово «webpack». Если вы еще не пытались узнать, что такое wabpack? Вам нужно сделать это как можно скорее, потому что есть вероятность, что веб-пакет более востребован / выгоден в вашем проекте, чем вы думаете.

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

Введение

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

Для разработчиков JavaScript доступно множество сборщиков модулей, таких как grunt, gulp, Browserify и т. Д.

Еще один сборщик модулей может сбить разработчика с толку относительно того, что нового в веб-пакете, чего не может сделать другой сборщик модулей?

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

Зачем нам нужен веб-пакет?

• Вы боретесь с начальным временем загрузки приложения?
• Вы хотите, чтобы все ваши ресурсы, такие как изображение, файл, сторонняя библиотека и т. Д., Загружались только тогда, когда вам это нужно (в отличие от require.js, который работает только с файлом js, а не с статическим активом, таким как изображения)
• Вы хотите настроить каждую часть комплекта модуля.

Установка

просто введите следующее в консоли,

npm install webpack -g

Все сделает за вас (для установки webpack требуется nodejs).

Как использовать веб-пакет?

1. Используя командную строку:

• Предположим, у вас есть файл js с именем index.js, который вы хотите связать с файлом bundule.js.

Просто запустите команду

webpack ./index.js bundle.js

Webpack создаст файл bundle.js с помощью index.js, это очень простой пример, в котором нечего загружать в файл index.js,

Если файл index.js имеет какой-либо другой файл js в качестве зависимости, тогда веб-пакет также разрешит это, и все кадры зависимостей будут внутри файла bundle.js

Пример:

index.js

require(./dependency.js);

dependency.js

console.log(“dependency is resolved by webpack”);

Теперь беги

webpack ./index.js bundle.js

При выполнении файла bundle.js вывод файла будет

“dependency is resolved by webpack”

Точно так же мы можем потребовать файл .css, но нужно сказать о веб-пакете, чтобы использовать загрузчик для css

webpack ./index.js bundle.js --module-bind ‘css=style-loader!css-loader’

• Здесь ‘! ‘ используется в качестве связующего загрузчика.
• css-loader - разрешить url внутри, чтобы получить файл.
• style -loader - вставить файл css туда, где используется require.

Теперь внутри html / js мы можем использовать команду require для загрузки файла css, а webpack обо всем позаботится.

Как видите, эта командная строка бесполезна, если у нас есть большее количество js-файлов и нескольких модулей для загрузки, решение этого - файл конфигурации для webpack.

2. Файл конфигурации Webpack:

Имя файла конфигурации в вашем проекте должно быть webpack.config.js.

У нас будет простой файл конфигурации:

module.exports = {
    entry: "./index.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [{
                "Style-loader",
                "css-loader"
            }]
        }]
    }
};

Обратите внимание, что это последний синтаксис webpack v2, синтаксис webpack v1 немного отличается от этого.

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

Теперь поговорим об особенностях веб-пакета на примере:

1. Модуль загрузки commonjs и AMD

Модуль - это фрагмент кода, который написан в другом файле, чтобы они были разделены и загружались только тогда, когда этого требует другой код.

Если вы знакомы с языком c, то

#include “file”

это вид загрузки модуля.

Если вы знакомы с java, тогда

import java.util.*;

Достаточно близко к загрузке модуля

Javascript не обеспечивает загрузку модулей по умолчанию (стандарт ES6 предоставляет, но не реализован в браузере morden)

В js доступны сторонние загрузчики модулей, такие как AMD и commonjs.

webpack поддерживает стили модулей как AMD, так и CommonJs.

2. Интерфейс плагинов:

webpack имеет богатый плагин интерфейс. Большинство функций - это внутренние плагины, использующие этот интерфейс. Это делает webpack очень гибким

Подробнее о плагинах здесь.

3. Введение в загрузчик с небольшим примером:

Если вам нужна предварительная обработка в файле до того, как вам потребуется приложение (например, преобразование файла .less в файл .css), эту задачу можно легко выполнить с помощью загрузчиков vai в wabpack, в веб-пакете есть несколько популярных загрузчиков, если вы хотите. можете легко написать свои собственные загрузчики, работающие на Node.js.

4. Разделение кода:

Это очень интересная и полезная функция webpack, давайте попробуем разобраться в этом.

Допустим, у вас есть большое приложение с большим количеством файлов js, и приложение также зависит от множества сторонних библиотек, таких как jquery, lodash и т. Д.

В идеале ваша сборка должна содержать один файл bundle.js в вашем html, этот bundle.js содержит весь код JavaScript, включая код JavaScript сторонней библиотеки, если вы не использовали для этого cdn.

Но это может быть проблематично, если файл bundle.js очень большой, а также мы не можем использовать для этого кеширование, поскольку одно изменение в файле приведет к загрузке всего файла bundle.js.

Чтобы быстро загружать приложение при запуске и загружать другой код js, асинхронный веб-пакет обеспечивает разделение кода

Есть два способа разбить код на части:

1. Разделение кода - Использование import ()

• Что касается модуля import () webpack v2, загрузка предложения по синтаксису находится на пути в ECMAScript.

2. Разделение кода - Использование require.ensure ()

• require.ensure () внутри кода будет действовать как точка разделения для webpack, webpack создаст для этого отдельный файл, и он будет загружен по запросу с использованием jsonp-запроса.

Чтобы разобраться в этом подробнее, возьмем пример с официального сайта webpack.

Предположим, у нас есть три файла javascript

Entry.js

require(‘./a’);
require.ensure([], function(require){
 require(‘./b’);
});

a.js

console.log(‘***** I AM a *****’);

b.js

console.log(‘***** I AM b *****’);

При запуске webpack в этом проекте мы обнаруживаем, что webpack создал два новых пакета: bundle.js и 0.bundle.js.

entry.js и a.js входят в состав bundle.js.

b.js входит в состав 0.bundle.js.

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

Это можно сделать с помощью CommonsChunkPlugin в веб-пакете.

Узнайте больше о CommonsChunkPlugin здесь

5. Оптимизация

Вы можете оптимизировать свой код (как css, так и js) с помощью таких плагинов, как uglify.

Некоторые из важных плагинов:

Webpack.optimize.UglifyJsPlugin () - для минификации.

webpack.optimize.DedupePlugin () - для удаления повторяющегося кода.

6. Множественная цель:

Основная цель webpack - Интернет, но он также поддерживает создание пакетов для WebWorkers и Node.js.

7. Инструмент разработки:

Если вы хотите отладить свой код, веб-пакет поддерживает SourceUrls и SourceMaps для простой отладки.

Исходная карта позволяет вам увидеть в вашем коде точку, в которой произошла ошибка в вашем инструменте разработки.

8. Сервер разработки:

Webpack также предоставляет решение для запуска веб-сервера в приложении.

Обеспечивает живую перезагрузку

npm install webpack-dev-server -g

После установки dev-сервера просто введите

webpack-dev-server — open

Он запустит сервер разработки на http: // localhost: 8080, и теперь вы можете приступить к кодированию!

Официальный сайт webpack https://webpack.js.org/

ПРИМЕЧАНИЯ:

1. Если ваше приложение небольшое, с одним файлом javascript, вам может не потребоваться веб-пакет.
2. production вы не найдете загрузчика модулей, такого как webpack, замените этот код кодом, понятным браузеру или node.js.
3. «webpack v1 устарел. Мы призываем всех разработчиков перейти на webpack 2 ». Это официальное заявление от webpack о том, что все разработчики должны либо использовать webpack v2, либо перейти на v2 с v1.