Как правильно использовать path.join / path.resolve и __dirname в файле, упакованном Webpack? - PullRequest
0 голосов
/ 05 января 2020

Этот вопрос основан на минимальном примере в этом репо .

Вот что находится в репо.

Структура каталогов

dist
  index.js
src
  templates
    index.html
  index.js
webpack.config.js
package.json

Код

index.js в src содержит простой узел http-сервера, прослушивающий порт 3000. Когда вы делаете запрос, он будет читать содержимое src/templates/index.html и поместите его в полезную нагрузку ответа и отправьте ответ.

Чтение файла index.html выполняется с использованием fs.readFile, а путь к файлу строится следующим образом:

const templatesDir = path.join(__dirname, "/templates/");
fs.readFile(`${templatesDir}/${templateName}.html`, "utf8", (err, str) => {

Это приложение использует Webpack, поэтому значение __dirname зависит от конфигурации Webpack. В webpack.config.js у меня есть:

var path = require("path");
module.exports = {
  target: "node",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  node: {
    __dirname: true
  },
  context: path.resolve(__dirname)
};

Из документов Webpack это означает, что __dirname - это имя каталога входного файла относительно параметра контекста. Итак, templatesDir будет src/templates/, а путь к fs.readFile будет src/templates/index.html; это не абсолютный путь .

Так что теперь, если я запускаю webpack, я получаю пакет с именем bundle.js в каталоге dist. Если я запускаю node ./dist/bundle.js, я могу сделать запрос на http://localhost:3000 и получить содержимое index.html

Вопросы

В bundle.js, путь, переданный в fs.readFile, это src/templates/index.html, но это не абсолютный путь, так как же пакет узнает, где найти index.html? Мне кажется, я знаю ответ: вы можете передать относительный путь к path.join, и он определит абсолютный путь на основе process.cwd(). Но это совсем не идеально, потому что это работает правильно только тогда, когда я запускаю приложение из того же каталога, который указан как context в webpack.config.js.

1) Если бы я должен был разместить это файл сервера где-то еще, я бы хотел загрузить каталог dist. Но, конечно, серверу нужны шаблоны для правильной работы. Как правильно рассуждать о настройке сервера относительно файлов, которые он обслуживает при использовании path.join?

То есть копирование шаблонов в папку dist должно быть частью Процесс сборки Webpack? Я так думаю, но если так, как я могу сказать bundle.js использовать относительные пути? Если я просто заменю текущий path.join на относительный путь, он не будет работать.

EDIT Похоже, что все это испытание можно исправить, изменив небольшую часть конфигурации Webpack :

  node: {
    __dirname: false
  },
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...