Блог

Прежде всего, я совершенно новичок в веб-разработке, поэтому, если мой подход абсолютно неверен, просто скажите об этом.

Я хочу автоматизировать сборку файлов sass и ts, поэтому я прочитал о Gulp / Webpack, и, похоже, webpack — это правильный путь.

Я создаю простой одностраничный веб-сайт, и на данный момент у меня есть только небольшой необходимый javascript, поэтому, на мой взгляд, имеет смысл, что точкой входа для webpack должен быть сам HTML-файл. Однако во всех документах и руководствах говорится только о запуске с .js .

Есть ли способ начать с HTML и разрешить js, css, изображения и другие необходимые вещи?

Должен ли я просто отказаться от использования webpack и просто использовать gulp для компиляции typescript и sass?

Одной из альтернатив было бы использовать Parcel, который поддерживает использование HTML-файла в качестве записи.

Если у вас нет содержимого в html-файле, и вам нужны только css-файлы, assets … и т.д. Вы можете создать папку с именем ‘src’ и index.js файл в нем, затем импортируйте эти файлы, например:

 import "../style.css";
import "../assets/img1.jpg";
  

это должно выполнить свою работу.

Но если у вас есть содержимое в index.html тогда создание html-тегов через js с литералами шаблона, document.body.innerHTML и document.head.innerHTML было бы самым простым решением, которое я мог придумать

 const headContent = `
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpack Version</title>
<link rel="stylesheet" href="../css/index.css">
<script src="../js/index.js" defer></script>
`;

const bodyContent = `
    <ul>
        <li>Astronauts</li>
        <li>Rockets</li>
        <li>Metoers</li>
        <li>Dishes</li>
        <li>Satellites</li>
    </ul>
    <img src="../images/logo.jpg">
    <!-- and so on -->
`;

document.body.innerHTML = bodyContent;
document.head.innerHTML = headContent;
  

Строго говоря, вы не можете делать то, что просите, для всего вашего приложения

[использовать] HTML как точку входа в Webpack

Файлы HTML не могут ссылаться на локальные файлы на вашем жестком диске (существуют системы шаблонов, но это другое дело). Файлы HTML обслуживаются сервером и могут ссылаться только на удаленные файлы.

С Webpack вы будете использовать разные загрузчики, которые способны выполнять разные операции с файлами в зависимости от того, какой у них тип файла.

Что вы можете сделать, так это:

• используйте HTML в качестве точки входа в Webpack для других ваших HTML-файлов, если вы используете библиотеку шаблонов или импортируете HTML
• используйте JS-файл в качестве точки входа в Webpack (обычно index.js ) для всех ваших файлов JS
• затем оба вывода помещаются в dist папку, и вывод HTML будет ссылаться на ваш вывод JS, но не с относительным или абсолютным путем (диск), это будет сделано с помощью удаленного поиска ресурсов. Стандартом для них является унифицированный указатель ресурсов, URL (относительный URL). Прошу прощения за чрезмерно подробное (педантичное) описание, я просто хочу как можно яснее объяснить причины, стоящие за всем этим.

Однако во всех документах и руководствах говорится только о запуске с .js.

Для простого веб-сайта, такого как одностраничный сайт, обычно HTML вообще не проходит никакой предварительной обработки. И единственное действие, предпринимаемое на этапе сборки, — это переместить файл из src в dist , вот почему учебные пособия, как правило, сосредоточены на стороне JS.

Судя по описанию вашего проекта, вам, похоже, стоит начать экспериментировать с html-загрузчиком, который поддерживает общие функции, такие как сокращение, разрешение путей к изображениям и т.д.