Автор оригинала: 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, используя
Заказ имеет значение, и это обратно (последний выполнен в первую очередь).
Какие погрузчики там? Многие! Вы можете найти полный список здесь Отказ
Обычно используется погрузчик Бабел , который используется для транситирования современного 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 .