Для начала установим webpack, делается это с помощью команд:
Настраивается Webpack с помощью конфигурационного
Пример конфигурационного файла:
Начальная конфигурация представляет собой следующее:
Так же необходимо установить webpack-dev-server, который понадобится для разработки и отладки приложения.
Для настройки webpack-dev-server добавим devServer в нашем конфигурационном файле.
Параметры для webpack-dev-server:
Также нам нужно добавить/заменить в нашем package.json файле скрипт запуска проекта:
и скрипт для сборки билда:
Загрузчики (loaders) — это специальные модули, которые используются для «загрузки» других модулей. Так же они позволяют предварительно обрабатывать файлы по мере их импорта или «загрузки».
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) — это специальные модули, которые используются для «загрузки» других модулей. Так же они позволяют предварительно обрабатывать файлы по мере их импорта или «загрузки».
