yarn add webpack webpack-cli -D, если используете менеджер пакетов yarn
npm i webpack webpack-cli --save-dev, для менеджера пакетов npm
Настраивается Webpack с помощью конфигурационного файла webpack.config.js, который хранится в корневой директории проекта.
Пример конфигурационного файла
const path = require('path')module.exports = { watch: true, entry: "./src/index.js", output: { filename: "bundle.js", path: path.resolve(__dirname,'build'), publicPath: "/" }};
Начальная конфигурация представляет собой следующее:
- watch заставляет webpack отслеживать изменения в файлах и заново выполнять сборку;
- entry Указывает на точку входа в проект, и откуда нужно начать построение графа внутренних зависимостей проекта;
- output Указывает путь, где будет располагаться создаваемый файл и как он будет называться;
Так же необходимо установить webpack-dev-server, который понадобится для разработки и отладки приложения.
yarn add webpack-dev-server для менеджера пакетов yarn или
npm i webpack-dev-server если используется npm
Для настройки webpack-dev-server добавим devServer в нашем конфигурационном файле.
Параметры для webpack-dev-server:
module.exports = { //... devServer: { port: 8000, historyApiFallback: true, hot: true, },};
Также нам нужно добавить/заменить в нашем package.json файле скрипт запуска проекта
"start": "webpack-dev-server --mode development",
и скрипт для сборки билда
"build": "webpack --mode production"
Загрузчики
Загрузчики (loaders) это специальные модули, которые используются для загрузки других модулей. Так же они позволяют предварительно обрабатывать файлы по мере их импорта или загрузки.
Загрузчики могут преобразовывать файлы, например TypeScript в JavaScript, sass в css. Они могут даже позволить нам делать такие вещи, как импорт файлов CSS и HTML непосредственно в наши модули JavaScript. Для их использования необходимо прописать нужные загрузчики в разделе module.rules файла конфигурации.
Примеры загрузчиков:
- babel-loader использует babel для загрузки файлов ES2015.
- file-loader для загрузки различных файлов (изображения, музыкальные дорожки и т.д.) в выходную директорию
- style-loader используется для загрузки стилей
- css-loader включает загрузку файлов стилей
- @svgr/webpack лоадер, позволяющий использовать svg изображения как jsx элементы
Для использования babel-loader необходимо установить babel/core. Также установим пресет babel/preset-env, который компилирует ES2015+ в ES5 путем автоматического определения необходимых Babel плагинов и полифайлов. Далее создадим файл .babelrc и в него добавим ранее установленный пресет.
{ "presets": [ "@babel/preset-env" ]}
Теперь добавим загрузчик в нашу конфигурацию для преобразования файлов Javascript. Это позволит нам использовать синтаксис ES2015 + в нашем коде (который будет автоматически конвертироваться в ES5 в окончательной сборке).
{ test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', },},
Пример конфигурации с лоадером file-loader
{ test: /\.(png|jpe?g|gif)$/i, use: [ { loader: 'file-loader', }, ],},
Пример конфигурации для лоадера @svgr/webpack
{ test : /\.(svg)$/, use: [ { loader: "@svgr/webpack" } ]}
Плагины
Плагины являются основой webpack, так как по сути вся его работа построена на системе плагинов. Они значительно расширяют возможности загрузчиков.
Загрузчики выполняют предварительную обработку файлов любого формата. Они работают на уровне отдельных файлов во время или до создания пакета. После того как отработают загрузчики наступает очередь плагинов. Плагины как правило отрабатывают только одну функцию.
Для их использования необходимо добавить нужные плагины в разделе plugins файла конфигурации.
Примеры плагинов:
- html-webpack-plugin используется для создания html файлов
- copy-webpack-plugin копирует отдельные файлы или целые каталоги, которые уже существуют, в каталог сборки.
- definePlugin позволяет создавать глобальные константы
- HotModuleReplacementPlugin включает HMR режим, обновляет только ту часть, которая изменилась, не перезагружая полностью приложение.
Пример конфигурации с добавленными плагинами:
plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.DefinePlugin({ 'process.env': JSON.stringify(process.env), }), new HtmlWebpackPlugin({ template: "./public/index.html", }), new CopyWebpackPlugin({ patterns: [ { from: './public/favicon.ico', to: './public'} ] }),],
Также добавим плагин UglifyjsWebpackPlugin, который минимизирует js код, для этого нужно установить uglifyjs-webpack-plugin и добавить его в разделе optimization
optimization: { minimizer: [new UglifyJsPlugin()]},
