Знакомство с Webpack для начинающих

znakomstvo s webpack dlya nachinayushhih

Webpack – это инструмент, позволяющий компилировать модули JavaScript. Он также известен как а комплектовщик модулей.

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

Он может выполнять многие операции:

  • помогает объединить ваши ресурсы.
  • следит за изменениями и выполняет задачи.
  • может запустить транспиляцию Babel в ES5, что позволит вам использовать новейшие функции JavaScript, не беспокоясь о поддержке браузера.
  • может транспилировать CoffeeScript в JavaScript
  • может конвертировать встроенные изображения в URI данных.
  • позволяет использовать require() для CSS файлов.
  • может запускать веб-сервер разработки.
  • может справиться с горячей заменой модуля.
  • можно разделить исходные файлы на несколько файлов, чтобы избежать загрузки большого JS-файла при обращении к первой странице.
  • может выполнять встряхивание деревьев.

Webpack не ограничивается использованием в интерфейсе, но также полезен в разработке бэкенда Node.js.

Существует много предшественников Webpack и много сходств о том, что делают эти инструменты и Webpack. Основное отличие состоит в том, что эти инструменты известны как бегуны задачтогда как Webpack родился как комплектующий модулей.

Webpack является более целеустремленным инструментом. Вам просто нужно указать точку входа в вашу программу (это может быть даже файл HTML с тегами сценария), а веб-пакет анализирует файлы и объединяет их в единственный исходный файл JavaScript, содержащий все необходимое для запуска программы.

Установка Webpack

Webpack может быть установлен глобально или локально для каждого проекта.

Глобальная установка

Вот как установить его глобально с помощью Yarn:

yarn global add webpack webpack-cli

с npm:

npm i -g webpack webpack-cli

как только это будет сделано, вы сможете бежать

webpack-cli
D8QBAOc2eqjQsHVi4ieq-pf6wBtZfrhMv5-n

Локальная установка

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

С пряжей:

yarn add webpack webpack-cli -D

с npm:

npm i webpack webpack-cli --save-dev

Как только это будет сделано, добавьте это к своему package.json файл:

{   //...   "scripts": {     "build": "webpack"   } }

Как только это будет сделано, вы можете запустить Webpack, введя

yarn build

в корне проекта.

Конфигурация Webpack

По умолчанию Webpack (начиная с версии 4) не требует никакой конфигурации, если вы соблюдаете следующие условия:

  • в точка входа вашего приложения ./src/index.js
  • выход вставлен ./dist/main.js.
  • Webpack работает в производственном режиме

Конечно, вы можете настроить каждую часть Webpack, когда вам это нужно. Конфигурация Webpack сохраняется в файле webpack.config.js файл в корневой папке проекта.

Точка входа

По умолчанию точка входа есть ./src/index.js В этом простом примере используется ./index.js файл как отправная точка:

module.exports = {  /*...*/  entry: './index.js'  /*...*/}

Выход

По умолчанию выход генерируется в ./dist/main.js. Этот пример содержит исходный пакет app.js:

module.exports = {  /*...*/  output: {    path: path.resolve(__dirname, 'dist'),    filename: 'app.js'  }  /*...*/}

Использование Webpack позволяет использовать import или require операторы в коде JavaScript не только для включения другого JavaScript, но и любого типа файла (например, CSS).

Целью Webpack является работа со всеми нашими зависимостями, а не только с JavaScript, и загрузчики являются одним из способов сделать это.

Например, в своем коде можно использовать:

import 'style.css'

с помощью этой конфигурации загрузчика:

module.exports = {  /*...*/  module: {    rules: [      { test: /\.css$/, use: 'css-loader' },    }]  }  /*...*/}

Регулярное выражение нацелено на любой файл CSS.

Погрузчик может иметь следующие параметры:

module.exports = {  /*...*/  module: {    rules: [      {        test: /\.css$/,        use: [          {            loader: 'css-loader',            options: {              modules: true            }          }        ]      }    ]  }  /*...*/}

Для каждого правила может потребоваться несколько загрузчиков:

module.exports = {  /*...*/  module: {    rules: [      {        test: /\.css$/,        use:          [            'style-loader',            'css-loader',          ]      }    ]  }  /*...*/}

В этом примере css-loader интерпретирует import 'style.css' директивы в CSS style-loader затем отвечает за внедрение этого CSS в DOM, используя a <styтег le>.

Порядок имеет значение, и он меняется (последний выполняется первым).

Какие бывают погрузчики? Много! Полный список можно найти здесь.

Часто используемым загрузчиком является Babel, который используется для транспиляции современного JavaScript в ES5:

module.exports = {  /*...*/  module: {    rules: [      {        test: /\.js$/,        exclude: /(node_modules|bower_components)/,        use: {          loader: 'babel-loader',          options: {            presets: ['@babel/preset-env']          }        }      }    ]  }  /*...*/}

Этот пример заставляет Babel предварительно обрабатывать все наши файлы React/JSX:

module.exports = {  /*...*/  module: {    rules: [      {        test: /\.(js|jsx)$/,        exclude: /node_modules/,        use: 'babel-loader'      }    ]  },  resolve: {    extensions: [      '.js',      '.jsx'    ]  }  /*...*/}

См. babel-loader варианты здесь.

плагины

Плагины похожи на загрузчики, но на стероидах. Они могут делать то, что не могут производить загрузчики, и они являются основными строительными блоками Webpack.

Возьмем этот пример:

module.exports = {  /*...*/  plugins: [    new HTMLWebpackPlugin()  ]  /*...*/}

The HTMLWebpackPlugin плагин выполняет работу автоматического создания HTML-файла и добавления выходного пути JS, поэтому JavaScript готов к обслуживанию.

Доступно много плагинов.

Один полезный плагин, CleanWebpackPluginможно использовать для очистки dist/ папку перед созданием какого-либо вывода, чтобы вы не оставляли файлы при изменении названий исходных файлов:

module.exports = {  /*...*/  plugins: [    new CleanWebpackPlugin(['dist']),  ]  /*...*/}

Режим Webpack

Этот режим (введенный в Webpack 4) устанавливает среду, в которой работает Webpack. Его можно установить на development или production (по умолчанию для производства, поэтому вы устанавливаете его только при переходе к разработке).

module.exports = {  entry: './index.js',  mode: 'development',  output: {    path: path.resolve(__dirname, 'dist'),    filename: 'app.js'  }}

Режим разработки:

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

Производственный режим создается медленнее, поскольку требуется создать более оптимизированный пакет. Полученный JavaScript меньше размера, так как он удаляет многие вещи, которые не нужны для производства.

Я сделал образец программы, которая просто печатает a console.log заявление.

Вот производственный пакет:

alm5uVDatSP2YQ6MJ6QcXBIAvq3CQggpEzIs

Вот пакет разработки:

OKvuW1qYszkWflVJPEDXjK8QBuheqi28UpaQ

Запуск Webpack

Webpack можно запустить из командной строки вручную, если она установлена ​​глобально. Но обычно вы пишете сценарий внутри package.json файл, который затем запускается с помощью npm или yarn.

Например это package.json определение сценариев, которые мы использовали ранее:

"scripts": {  "build": "webpack"}

позволяет нам бегать webpack бегая

npm run build

или

yarn run build

или просто

yarn build

Наблюдая за изменениями

Webpack может автоматически перестроить пакет, когда в вашем приложении происходят изменения, и он продолжает прислушиваться к следующим изменениям.

Просто добавьте этот скрипт:

"scripts": {  "watch": "webpack --watch"}

и бежать

npm run watch

или

yarn run watch

или просто

yarn watch

Одной приятной особенностью режима часов является то, что пакет меняется только в том случае, если сборка не содержит ошибок. Если есть ошибки, watch продолжит прислушиваться к изменениям и попытается перестроить пакет, но на текущий рабочий пакет эти проблемные сборки не влияют.

Обработка изображений

Webpack позволяет использовать изображение очень удобным способом, используя file-loader погрузчик.

Эта простая конфигурация:

module.exports = {  /*...*/  module: {    rules: [      {        test: /\.(png|svg|jpg|gif)$/,        use: [          'file-loader'        ]      }    ]  }  /*...*/}

Позволяет импортировать изображения в JavaScript:

import Icon from './icon.png'const img = new Image()img.src = Iconelement.appendChild(img)

Где img является элементом HTMLImageElement. Просмотрите документы изображения.

file-loader может обрабатывать и другие типы активов, таких как шрифты, CSV, XML и т.д.

Еще один хороший инструмент для работы с изображениями – это url-loader погрузчик.

Этот пример загружает любой файл PNG размером менее 8 КБ в качестве URL-адреса данных.

module.exports = {  /*...*/  module: {    rules: [      {        test: /\.png$/,        use: [          {            loader: 'url-loader',            options: {              limit: 8192            }          }        ]      }    ]  }  /*...*/}

Проработайте свой код SASS и трансформируйте его в CSS

Использование sass-loader, css-loader и style-loader:

module.exports = {  /*...*/  module: {    rules: [      {        test: /\.scss$/,        use: [          'style-loader',          'css-loader',          'sass-loader'        ]      }    ]  }  /*...*/}

Создание исходных карт

Поскольку Webpack объединяет код, исходные карты обязательны для получения ссылки на исходный файл, который вызвал ошибку. Например:

Вы приказываете Webpack генерировать исходные карты с помощью devtool свойство конфигурации:

module.exports = {  /*...*/  devtool: 'inline-source-map',  /*...*/}

devtool имеет много возможных значений, наиболее употребительными, вероятно, являются:

  • none: не добавляет исходных карт
  • source-map: идеально подходит для производства, предоставляет отдельную исходную карту, которую можно минимизировать, и добавляет ссылку в пакет, чтобы инструменты разработки знали, что исходная карта доступна. Конечно, вам следует настроить сервер, чтобы избежать его доставки, а просто использовать его для отладки
  • inline-source-map: идеально подходит для разработки, встраивает исходную карту в качестве URL-адреса данных

Я публикую 1 бесплатное руководство по программированию в день на flaviocopes.com, проверьте его!

Первоначально опубликовано на flaviocopes.com.

Добавить комментарий

Ваш адрес email не будет опубликован.