Для начала установим webpack, делается это с помощью команд:
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) — это специальные модули, которые используются для «загрузки» других модулей. Так же они позволяют предварительно обрабатывать файлы по мере их импорта или «загрузки».
