Меню
Шаг 1. Знакомство с проектомШаг 2. Перечень используемых зависимостей Шаг 3. Базовый конфиг и его настройкаШаг 4. webpack.base.js и его настройка Шаг 5. webpack.dev.js и его настройкаШаг 6. webpack.prod.js и его настройка Шаг 7. Итог

Шаг 2. Перечень используемых зависимостей

Сначала откроем файл package.json и посмотрим зависимости, которые мы будем использовать.

{
  "name": "webpack-config",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "private": true,
  "types": "index",
  "scripts": {
    "build": "npx webpack --mode production --config webpack.config.js",
    "dev": "npx webpack --mode development --config webpack.config.js",
    "start": "npx webpack serve --mode development",
    "deploy": "gh-pages -d dist -m 'Deploying to gh-pages'"
  },
  "browserslist": [
    ">0.3%",
    "not ie 11",
    "not dead",
    "not op_mini all"
  ],
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/eslint-parser": "^7.19.1",
    "@babel/plugin-transform-runtime": "^7.19.1",
    "@babel/preset-env": "^7.19.4",
    "@babel/runtime": "^7.19.4",
    "@csstools/postcss-sass": "^5.0.1",
    "autoprefixer": "^10.4.12",
    "babel-loader": "^8.2.5",
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.1",
    "css-minimizer-webpack-plugin": "^4.2.2",
    "eslint": "8.22.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-webpack-plugin": "^3.2.0",
    "gh-pages": "^4.0.0",
    "glob": "^8.0.3",
    "html-loader": "^4.2.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.1",
    "postcss": "^8.4.18",
    "postcss-loader": "^7.0.1",
    "postcss-preset-env": "^7.8.2",
    "postcss-scss": "^4.0.5",
    "prettier": "^2.7.1",
    "sass": "^1.55.0",
    "sass-loader": "^13.1.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1",
    "webpack-merge": "^5.8.0",
    "webpackbar": "^5.0.2"
  },
  "dependencies": {
    "normalize.css": "^8.0.1"
  }
}

Все пакеты взяты из предыдущей статьи и инициализированного конфига webpack, который получился в результате выполнения команды:

npx webpack init

Также помним, что перед генерацией готового конфига нужно проинициализировать директорию с проектом — ввести команду npm init -y и установить два пакета: webpack и webpack-cli.

Все пакеты, находящиеся в полях dependencies и devDependencies, содержатся только в файле package.json и устанавливаются командой npm i.