Я работал над учебными пособиями по https://webpack.js.org/guides/output-management/, и они укрепили мое понимание того, как веб-пакет обычно объединяет весь ваш интерфейс в скрипт, который запускается с помощью базовой страницы HTML, например this:
<html>
<head>
<title>Output Management</title>
</head>
<body>
<script src="./app.bundle.js"></script>
</body>
</html>
Этот файл находится в каталоге sr c, который находится в проекте root.
Я немного изменил учебники, обслуживая страницу HTML с сервера Express, которая выглядит следующим образом:
const express = require("express");
var path = require("path");
const server = express();
server.use(express.static(path.join(__dirname, "../dist")));
server.use(express.urlencoded({ extended: true }));
var indexPath = path.join(__dirname, "../src/index.html");
//create a server object:
server
.get("/", function(req, res) {
res.status(200)
res.sendFile(indexPath);
//res.send('<h1>I am not the webpack script!</h1>')
})
module.exports = server
Пока все имеет смысл. Этот сервер обслуживает мой индекс. html, который запускает скрипт webpack, и этот скрипт заставляет страницу HTML отображать текст, изображения и CSS. Если я раскомментирую строку res.send, сервер обслуживает однострочный веб-сайт.
Тем не менее, связанный учебник рекомендует попробовать плагин HTML -webpack, и когда он появляется, я запутываюсь. Я понимаю, что плагин создает файл index. html в том же каталоге, что и связанные сценарии (в моем случае / dist), который включает в себя все сценарии, созданные webpack. Конечно, имеет смысл. Но ничто явно не обслуживает этот файл HTML. Однако, если я добавлю плагин в конфигурацию моего веб-пакета:
entry: {
app: "./src/index.js",
print: "./src/print.js"
},
+ plugins: [
+ new HtmlWebpackPlugin({
+ title: 'Output Management',
+ }),
+ ],
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist")
},
, а затем перейду к localhost: 3000 в браузере, он отобразит файл /dist/index.html, а не / src / index . html файл. Я ничего не делаю, чтобы изменить сервер. Файл js меняет то, что отображается в браузере, но если я не могу прослушать этот сервер, я ничего не вижу, поэтому, очевидно, webpack- html -plugin не создает сервер своего own.
По-видимому, происходит то, что webpack- html -plugin не просто динамически создает файл HTML для запуска связанных сценариев, но также меняет поведение моего сервера таким образом, что Я явно не инструктирую это и, похоже, не могу изменить.
TLDR: В частности, что-то в webpack- html -plugin заставляет root маршрут моего express сервера обслуживать /dist/index.html, а не /src/index.html, как я прямо проинструктировал. Почему?
Репо на https://github.com/CliffRobinson/webpack-tutorial-sandbox, и вы можете (вероятно) взглянуть на коды и коробку здесь , чтобы увидеть, можете ли вы повторить это странное поведение.