Size: a a a

Webpack — русскоговорящее сообщество

2020 September 20

МК

Миша Ковальчук... in Webpack — русскоговорящее сообщество
Roman Usherenko
в самом простом случае ты пишешь два html файла и 1 js

в js ты пишешь что-то вроде

import home from './home.html'
import about from './about.html'

document.addEventListener('load', () => {
 const root = document.querySelector('#root')
 const content = (window.location.pathname === 'about') ? about : home

 root.innerHtml = content
}

но так ты конечно далеко не уедешь, это я просто показываю как оно работает концептуально
все таки уточню) Далеко не уедешь именно на этом примере или концептуально этот прием такой, на котором далеко не уедешь?
И еще отдельный вопрос)
Можно ли как-то импортить изображения в html? У меня там сейчас просто в src прописан путь в строке. Но не удобно, когда путь изменился нужно все вручную менять. Хотя с импортами тоже возможно так будет.
Есть тут какие-то решения или так и нужно, в ручную ходить и менять пути?
источник

RU

Roman Usherenko in Webpack — русскоговорящее сообщество
Миша Ковальчук
все таки уточню) Далеко не уедешь именно на этом примере или концептуально этот прием такой, на котором далеко не уедешь?
И еще отдельный вопрос)
Можно ли как-то импортить изображения в html? У меня там сейчас просто в src прописан путь в строке. Но не удобно, когда путь изменился нужно все вручную менять. Хотя с импортами тоже возможно так будет.
Есть тут какие-то решения или так и нужно, в ручную ходить и менять пути?
концептуально - когда у тебя больше чем 2 страницы и внутри этих страниц тоже что-то динамическое - ты задолбаешься руками писать код, для этого и есть фреймворки, роутеры итд
источник

RU

Roman Usherenko in Webpack — русскоговорящее сообщество
по поводу картинок ничо не поделаешь, если поменял путь - надейся на свою IDEшку)
источник

МК

Миша Ковальчук... in Webpack — русскоговорящее сообщество
оокей. Спасибо большое)
источник

Ж

Женя in Webpack — русскоговорящее сообщество
Можете поделиться своей сборкой webpack, если у вас в html инлайново style="background-image: url('public/assets/images/header-bg.jpg')" собирается при команде npm run build ?
источник

С

Сергей in Webpack — русскоговорящее сообщество
Женя
Можете поделиться своей сборкой webpack, если у вас в html инлайново style="background-image: url('public/assets/images/header-bg.jpg')" собирается при команде npm run build ?
html-loader ищет относительно файла html, т.е у тебя просписано:

        <header class="header" style="background-image: url('public/assets/images/header-bg.jpg')">

Он ищет папку public рядом с файлом html
источник

С

Сергей in Webpack — русскоговорящее сообщество
Женя
Можете поделиться своей сборкой webpack, если у вас в html инлайново style="background-image: url('public/assets/images/header-bg.jpg')" собирается при команде npm run build ?
Попробуй ./public написать
источник

С

Сергей in Webpack — русскоговорящее сообщество
Женя
Можете поделиться своей сборкой webpack, если у вас в html инлайново style="background-image: url('public/assets/images/header-bg.jpg')" собирается при команде npm run build ?
Ой, т.е вот так, не внимательный я:

       <header class="header" style="background-image: url('./assets/images/header-bg.jpg')">
источник

Ж

Женя in Webpack — русскоговорящее сообщество
Сергей
Попробуй ./public написать
npm start картинка есть, но когда npm run build, то картинки нет. Она попросту не попадает в build/images
источник

С

Сергей in Webpack — русскоговорящее сообщество
Женя
npm start картинка есть, но когда npm run build, то картинки нет. Она попросту не попадает в build/images
логично)) У тебя путь абсолютный же, он не обрабатывается лоадером
источник

С

Сергей in Webpack — русскоговорящее сообщество
Ты абсолютно прописал
источник

С

Сергей in Webpack — русскоговорящее сообщество
А при запуске сервера идет запрос на фотку домен/public/ и так далее
источник

С

Сергей in Webpack — русскоговорящее сообщество
Сергей
логично)) У тебя путь абсолютный же, он не обрабатывается лоадером
Точнее абсолютный
источник

Ж

Женя in Webpack — русскоговорящее сообщество
Сергей
Ой, т.е вот так, не внимательный я:

       <header class="header" style="background-image: url('./assets/images/header-bg.jpg')">
так при start картинка есть ./public/assets/images/header-bg.jpg Если ./assets/images/header-bg.jpg то картинки нет
источник

С

Сергей in Webpack — русскоговорящее сообщество
Женя
так при start картинка есть ./public/assets/images/header-bg.jpg Если ./assets/images/header-bg.jpg то картинки нет
Сейчас проверю))
источник

Ж

Женя in Webpack — русскоговорящее сообщество
Сергей
Ой, т.е вот так, не внимательный я:

       <header class="header" style="background-image: url('./assets/images/header-bg.jpg')">
для тега img работает путь ./assets Но для bgi работает ./public/assets
источник

С

Сергей in Webpack — русскоговорящее сообщество
Женя
для тега img работает путь ./assets Но для bgi работает ./public/assets
источник

С

Сергей in Webpack — русскоговорящее сообщество
@javawe Используй CopyWebpackPlugin и перебрасывай assets таким путем, ибо интерполяция в html-loader удалена как я понял
источник

S🕶

Sander 🕶 in Webpack — русскоговорящее сообщество
Всем привет, подскажите как собрать backend при помощи webpack, постоянно жалуется нa то что не видит пакеты Module not found: Error: Can't resolve 'request',
надо собрать таким образом чтоб, в bundle у меня был собран только мой код, а пакеты тянулись из node_modules,
до этого собирал только react.
источник

RU

Roman Usherenko in Webpack — русскоговорящее сообщество
Sander 🕶
Всем привет, подскажите как собрать backend при помощи webpack, постоянно жалуется нa то что не видит пакеты Module not found: Error: Can't resolve 'request',
надо собрать таким образом чтоб, в bundle у меня был собран только мой код, а пакеты тянулись из node_modules,
до этого собирал только react.
что значит "тянулись"? ты бекенд собираешь или фронт?
источник