Что такое Webpack?
Согласно официальному сайту, Webpack - это сборщик статических модулей для современных приложений JavaScript.
Webpack - это просто инструмент для объединения всех ваших файлов javascript, чтобы он работал.
Webpack можно использовать, когда вы создаете сложное приложение Front End со множеством статических ресурсов, не связанных с кодом, таких как CSS, изображения, шрифты и т. Д.
Если ваше приложение довольно мало, и вы не используете Если у вас нет много статических ресурсов, и вам нужно создать только один файл Javascript для обслуживания клиента, тогда Webpack может быть больше накладных расходов, чем вам нужно.
Webpack может выполнять множество операций. Например:
1. Конвертируйте ваши файлы из es6 в es5.
2. Преобразуйте ваши файлы .less или .scss в обычные .css.
3. Минимизирует ваши файлы (уменьшает размер файла)
4. Удаляет все комментарии из всех файлов (для уменьшения размера файла).
5. Поместите весь свой код в один файл .js.
6. Соберите все ваши пакеты .css в один файл.
Webpack принимает модули с зависимостями и генерирует статические ресурсы, которые представляют эти модули.
Базовая настройка
Сначала давайте создадим каталог, инициализируем npm, установим webpack локально и установим webpack-cli (инструмент, используемый для запуска webpack из командной строки):
mkdir webpack-demo cd webpack-demo npm init -y npm install webpack webpack-cli — save-dev
Мы можем проверить, что библиотеки были успешно установлены, проверив файл package.json.
“devDependencies”: {
“webpack”: “⁵.20.2”,
“webpack-cli”: “⁴.5.0”,
}
Мы немного изменим нашу структуру каталогов, отделив «исходный» код (./src) от нашего «дистрибутивного» кода (./dist). «Исходный» код - это код, который мы будем писать и редактировать. Код «распространения» - это минимизированный и оптимизированный результат нашего процесса сборки, который в конечном итоге будет загружен в браузер.
После установки этих пакетов нам нужно создать файл webpack.config.js, который экспортирует объект, содержащий настройки веб-пакета.
module.exports = {}
Краткое введение в webpack
Чтобы начать работать с webpack, вам необходимо ознакомиться с четырьмя основными концепциями. (Вход, выход, загрузчики, плагины)
- первая основная концепция называется « записью».
module.exports = {
entry: ‘./src/index.js’
};
Объект entry - это то место, откуда веб-пакет пытается начать сборку пакета. Webpack использует это как отправную точку.
2. Вторая основная концепция называется « вывод ».
Свойство output сообщает веб-пакету, где передавать создаваемые им пакеты и как называть эти файлы (по умолчанию это ./dist).
const path = require(‘path’);
module.exports = {
entry: ‘./src/index.js’,
output: {
path: path.resolve(__dirname, ‘dist’),
filename: ‘./bundle.js’
},
}
В этом примере output.filename отвечает за имя файла, а output.path - за каталог, в котором будет расположен файл.
3. Третья основная концепция - это « загрузчики ».
Загрузчики берут содержимое файлов, а затем преобразуют его по мере необходимости и включают результат преобразования в общий пакет.
const path = require(‘path’);
module.exports = {
entry: ‘./src/index.js’,
output: {
path: path.resolve(__dirname, ‘dist’),
filename: ‘./bundle.js’
},
module: {
rules: [
{
test: /\.css$/i,
use: [‘style-loader’, ‘css-loader’],
},
{
test: /\.(png|svg|jpg|jpeg|gif|mp4)$/i,
use: {
loader: ‘file-loader’,
options: {
name: ‘[name].[hash].[ext]’,
outputPath: ‘imgs’,
},
},
},
],
},
}
Использование загрузчиков преследует две цели:
1. Свойство test указывает, какие файлы следует преобразовать.
2. Свойство use указывает, какой загрузчик следует использовать для выполнения преобразования.
Список самых популярных загрузчиков
4. четвертая основная концепция - это «плагины».
Если загрузчики используются для преобразования определенных типов модулей, плагины могут использоваться для выполнения гораздо более широкого круга задач.
Чтобы использовать плагин, вам необходимо сначала установить его
npm i html-webpack-plugin -D
затем используйте require () и добавьте его в массив плагинов
const path = require(‘path’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
module.exports = {
entry: ‘./src/index.js’,
output: {
path: path.resolve(__dirname, ‘dist’),
filename: ‘./bundle.js’
},
plugins: [
new HTMLWebpackPlugin()
]
module: {
rules: [
{
test: /\.css$/i,
use: [‘style-loader’, ‘css-loader’],
},
{
test: /\.(png|svg|jpg|jpeg|gif|mp4)$/i,
use: {
loader: ‘file-loader’,
options: {
name: ‘[name].[hash].[ext]’,
outputPath: ‘imgs’,
},
},
},
],
},
}
HtmlWebpackPlugin создаст новый файл index.html в каталоге dist и добавит к нему связанную ссылку.
Список самых популярных плагинов
Запустить веб-пакет
У нас есть файл package.json, в котором мы можем создать скрипт для запуска webpack
Откройте файл package.json и измените объект сценария следующим образом:
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1",
“dev”: “webpack — mode development”,
“build”: “webpack — mode production”
},
Теперь, когда вы запустите команду npm run build в терминале, будет запущен веб-пакет, который создаст оптимизированный файл index_bundle.js и поместит его в dist
Заключение
Webpack - полезный и мощный инструмент. В этой статье представлены только его основные возможности. Но webpack может больше. Вот список ресурсов для дальнейшего изучения возможностей сборщика: