Рубрики
Без рубрики

Введение новичка в WebPack

WebPack – это инструмент, который позволяет компилировать модули JavaScript. Это также известно как модуль Bundler. Учитывая большое количество файлов, он генерирует один файл (или несколько файлов), которые запускают ваше приложение. Он может выполнять много операций: помогает вам объединить ваши ресурсы.

Автор оригинала: FreeCodeCamp Community Member.

WebPack – это инструмент, который позволяет компилировать модули JavaScript. Это также известно как Модуль Bundler Отказ

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

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

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

WebPack не ограничивается использованием на переднем конце, но полезно в разработке Backend Node.js.

Есть много предшественников WebPack и много сходства в том, что делают эти инструменты и WebPack. Основное отличие состоит в том, что эти инструменты известны как задачи бегунов , в то время как WebPack родился в качестве модуля Bundler.

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

Установка WebPack

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

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

Вот как установить его по всему миру с Пряжа :

yarn global add webpack webpack-cli

с NPM :

npm i -g webpack webpack-cli

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

webpack-cli

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

WebPack может быть установлен на месте. Это рекомендуемая настройка, потому что WebPack может быть обновлен Per-Project, и у вас меньше сопротивления использования последних функций только для небольшого проекта, а не обновляя все проекты, которые у вас есть, которые используют 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 позволяет использовать Импорт или требуется Заявления в вашем коде 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 интерпретирует Импорт «Стиль.css» Директива в CSS. Стиль-погрузчик Затем несет ответственность за инъекцию, что CSS в DOM, используя Le> тег.

Заказ имеет значение, и это обратно (последний выполнен в первую очередь).

Какие погрузчики там? Многие! Вы можете найти полный список здесь Отказ

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

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

Этот пример делает Babel Preprocess всеми нашими файлами 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()  ]  /*...*/}

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

Есть Много плагинов доступны Отказ

Один полезный плагин, CleanWebpackplugin , можно использовать для очистки Dist/ Папка перед созданием любого вывода, поэтому вы не оставляете файлы, когда вы меняете имена выходных файлов:

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

Режим WebPack

Этот режим (введенный в WebPack 4) устанавливает среду, на которой работает WebPack. Это может быть установлено на Развитие или Производство (По умолчанию для производства, поэтому вы устанавливаете только при движении к развитию).

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

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

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

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

Я сделал приложение приложения, которое просто печатает console.log утверждение.

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

Вот расслоение разработки:

Бегущий веб-папак

WebPack можно запустить из командной строки вручную, если установлен в мире. Но вообще вы пишете скрипт внутри Package.json Файл, который затем работает с помощью NPM или пряжа Отказ

Например, это 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

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

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

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

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

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 это HTMLIMEGEELEMESELEMESE. Проверьте Image Docs Отказ

файловой погрузчик Можно справиться с другими типами активов, таких как шрифты, файлы CSV, XML и многое другое.

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

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

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

Процесс свой код SASS и преобразовать его в CSS

Использование Sass-Loader , CSS-Loader и Стиль-погрузчик :

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

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

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

Вы говорите WebPack для генерации исходных карт, используя devtool Свойство конфигурации:

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

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

  • Нет : добавляет никаких исходных карт
  • Исходная карта : Идеально подходит для производства, обеспечивает отдельную исходную карту, которая может быть минимизирована, и добавляет ссылку в комплект, поэтому инструменты разработки знают, что исходная карта доступна. Конечно, вы должны настроить сервер, чтобы избежать доставки этого, и просто использовать его для целей отладки
  • Inline-Source-Map : Идеально подходит для разработки, вставляет исходную карту как URL-адрес данных

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