Блог

Я пытался настроить сервер разработки webpack, следуя руководству, в котором это делается webpack-dev-server , но поскольку он не работает webpack-cli v4 , я решил использовать webpack-serve (версия 3.2.0). Моя структура папок выглядит следующим образом. index.js и test.js в комплекте, они должны записывать некоторое число и строку в консоль, index.html в dist папка подключена к bundle.js . Мой package.json:

 {
  "name": "forkify",
  "version": "1.0.0",
  "description": "forkify project",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-serve --config webpack.config.js --host localhost --port 8080 --open"
  },
  "author": "Alex",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.1.0",
    "webpack-cli": "^4.0.0",
    "webpack-serve": "^3.2.0"
  },
  "dependencies": {}
}
  

и webpack.config.js выглядит примерно так:

 const path = require("path");

module.exports = {
  entry: "./src/js/index.js",
  output: {
    path: path.resolve(__dirname, "dist/js"),
    filename: "bundle.js",
  },
  devServer: {
    contentBase: "./dist",
  },
};
  

Когда я запускаю "start" скрипт, он открывает страницу с ошибкой «Не найдено / 404», здесь говорится, что он, должно быть, пытается обслуживать индексный файл, но не может его найти. Когда в "start" скрипте я не указываю хост и порт, он открывает страницу по http://[::]:55555/ и я получаю сообщение «Не удается подключиться к ошибке», ничего из моего пакета не регистрируется на консоли. Мне кажется, что Path подходит. Изменение devServer на serve в webpack.config.js выдает ошибку в командной строке: конфигурация имеет неизвестное свойство ‘serve’. Пожалуйста, помогите мне найти проблему и запустить сервер.

Попробуйте с приведенной ниже конфигурацией,

 {
 "webpack": "^5.1.3",
 "webpack-cli": "^3.3.12",
 "webpack-dev-server": "^3.11.0"
}
  

 "scripts": {
  "start": "webpack-dev-server --config webpack.config.js --host localhost --port 8080 --open"
}