Как настроить мертвый простой проект webpack-dev-server?
Я пытаюсь настроить простой стартовый проект JavaScript для веб-пакетов с абсолютным минимумом, чтобы играть с ванильным JavaScript. Когда я создаю проект, все работает нормально. Но если я попытаюсь запустить проект с помощью webpack-dev-server, при внесении изменений ничего не обновится.
Эта установка не использует файл webpack.config.js.
Требует ли webpack-dev-server конфигурационный файл для правильной работы этой функции?
пакет.json
{
"name": "javascript-starter-project",
"version": "0.0.1",
"description": "A simple boilerplate JavaScript starter project.",
"license": "MIT",
"author": "...",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --inline --open --port 8080"
},
"dependencies": {
"webpack": "^4.36.1"
},
"devDependencies": {
"prettier": "^1.18.2",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
}
}
index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<title>JavaScript Starter Project</title>
</head>
<body>
<button id = "button">Click me!</button>
<div id = "output"></div>
<script src = "dist/main.js"></script>
</body>
</html>
источник/index.js
const button = document.getElementById("button");
const output = document.getElementById("output");
button.addEventListener("click", () => {
output.innerText = "Hello!~";
});
Теперь, если я создам это, нажатие кнопки приведет к появлению текста «Hello! ~», как и ожидалось.
Когда я запускаю npm start, который использует webpack-dev-server, происходит то же самое. Но когда я делаю какие-либо изменения ("Hello!~" изменено на "Hello World!~"):
источник/index.js
const button = document.getElementById("button");
const output = document.getElementById("output");
button.addEventListener("click", () => {
output.innerText = "Hello World!~";
});
... и обновить страницу, работающую по адресу http://локальный:8080/, изменения не отражаются.
Что мне не хватает? Нужен ли мне файл webpack.config.js, чтобы это работало?
Обновлено:
Рабочая установка теперь выглядит так:
пакет.json
{
"name": "javascript-starter-project",
"version": "0.0.1",
"description": "A simple boilerplate JavaScript starter project.",
"license": "MIT",
"author": "...",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --open --port 8080"
},
"dependencies": {
"webpack": "^4.36.1"
},
"devDependencies": {
"html-webpack-plugin": "^3.2.0",
"prettier": "^1.18.2",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
}
}
webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
источник/index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<title>JavaScript Starter Project</title>
</head>
<body>
<button id = "button">Click me!</button>
<div id = "output"></div>
</body>
</html>
источник/index.js
const button = document.getElementById("button");
const output = document.getElementById("output");
button.addEventListener("click", () => {
output.innerText = "Hello!~";
});
Теперь, когда я npm start и редактирую src/index.js, изменения подхватываются! Я надеялся, что будет еще меньше сложности, чем это, но это довольно редко, поэтому я возьму это.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Проблема в наличии <script src = "dist/main.js"></script> в вашем index.html файле. Когда вы нажимаете npm start или npm run start, webpack-dev-server запускается правильно. Он обслуживает файлы index.html и main.js соответственно.
webpack-dev-сервер выполняет две задачи: объединение ресурсов в памяти и перезагрузка в реальном времени. Оперативная память требуется для поддержки перезагрузки в реальном времени.
Проблема возникает, когда вы вносите изменения в index.js. Webpack действительно обнаруживает изменения, он создает, но на самом деле не отправляет связанный файл обратно на диск. Он встроен в память. В вашем случае, поскольку вы жестко закодировали dist/main.js в своем index.html, новый main.js не создается, и вы не видите изменения при обновлении страницы.
Самое быстрое, что вы можете сделать, это запустить скрипт сборки в режиме просмотра. Поэтому используйте следующий скрипт npm в другом терминале: "build": "webpack --watch". Теперь при каждом сохранении будет создаваться сборка, и вы сможете увидеть изменения при обновлении.
Но это противоречит цели использования webpack-dev-server. Если это путь, который вы хотите выбрать, используйте что-то простое, например http-сервер.
Чтобы полностью использовать возможности dev-сервера с перезагрузкой в реальном времени, HMR, связыванием im-memory, вам понадобится правильный файл webpack.config.js. Кроме того, вы должны использовать html-webpack-плагин для создания файла index.html, чтобы могла работать перезагрузка в реальном времени.
Спасибо! Это привело меня к тому, что мне нужно было сделать. Я добавил файл webpack.config.js только с набором свойств плагина с помощью HtmlWebPackPlugin. Я удалил тег script из файла index.html и переместил файл в свой каталог src. Я отредактирую свой вопрос, чтобы добавить полную информацию о настройке.