так, а путь к бг-кртинке прописывать относительно какой директории ? src или build? Ну т.е. исходной или целевой?

dest в таком случае настраивается в лоадере для этого типа файлов, в css указывается относительный путь до src файла

Если используется Sass/SCSS то там чуть сложнее - писал выше

Уточню что относительно самого файла стилей

Всем привет.
Кто-нибудь после обновления до webpack 5 сталкивался с отсутствием HMR? Мне удалось вернуть HMR только путём обновления webpack-dev-server до v4.0.0-beta.0. Интересно, можно ли было как-то решить проблему, оставаясь на 3-й версии WDS?

P.S. При установке модулей валится warning про unmet peed dependency для пакета webpack-dev-middleware, который используется внутри WDS.

Кто-нибудь использует подход с Multiple file types per entry ? Можете объяснить преимущества и недостатки такого подхода?

webpack.config.js
---------------------------------------------------------------

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
 mode: process.env.NODE_ENV,
 entry: {
   home: ['./home.js', './home.scss'],
   account: ['./account.js', './account.scss'],
 },
 output: {
   filename: '[name].js',
 },
 module: {
   rules: [
     {
       test: /\.scss$/,
       use: [
         // fallback to style-loader in development
         process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
         'css-loader',
         'sass-loader',
       ],
     },
   ],
 },
 plugins: [
   new MiniCssExtractPlugin({
     filename: '[name].css',
   }),
 ],
};

Можно-ли в таком случае, следуя этой логике добавить в массив к примеру  './home.pug' и './account.pug' соответственно?
И как тогда лучше при таком подходе добавить общие модули стилей и скриптов к вышеперечисленным точкам входа?
Создать отдельную точку входа типа
entry: {
   common: ['./assets/js/common.js', './asets/scss/common.scss'],
   home: ['./home.js', './home.scss'],
   account: ['./account.js', './account.scss'],
 },
и уже тогда с помощью import прописывать их в необходимых точках входа (в данном случае - home.js и account.js )  или же просто перечислить в соответствующем массиве для каждого entry ?

entry: {
   home: ['./home.js', './home.scss', 'common.js', 'common.scss'],
   account: ['./account.js', './account.scss', 'common.js', 'common.scss'],
 },

Пожалуй еще уточню, что интересуюсь таким подходом с целью создания стартового шаблона для верстки с использованием sass, pug, es6. Т.е. никакого Реакта, маршрутизации и чего-то подобного в проекте не будет. Это надо для целей статичной многостраничной верстки с максимальной автоматизацией и разрешением всех зависимостей любых типов .

з.ы. Про генераторы статических сайтов вроде 11ty осведомлен.

у меня есть свой npm модуль, 'some-module'
я хочу добавить некоторые файлы и сделать так, что бы они импортились через такой путь: 'some-module/ssr'
но у меня сборка падает ругаясь что модуль не экспортиться (сборка которая работает уже в основном проекте, который использует модуль).

я указываю пути в packages.json через exports.

что я мог сделать не правильно?

Господа, доброго вечера!
Чего делатб, чтобы вебпачек перезагружал страницу после внесения изменений в файлы?
Сейчас такие настройки

UPD. Удаление hot помогло

Это несовместимые настройки?

Я использую такие настройки


   devServer: {
     //contentBase: path.resolve(__dirname, 'build'),          
     port: 8080,
     disableHostCheck: true,
     stats: 'minimal',
     hot: true,
     compress: true,
     overlay: true,
     open: true,
     historyApiFallback: true,
     watchOptions: {
       aggregateTimeout: 100,
       poll: true,
       ignored: 'node_modules',
     },
   }

И вроде  все нормально.

это на 4 версии?

да

ещё туда надо добавить

target: "web"

target: "web"

Попробую, спасибо

У меня была такая проблема на webpack 4, сделал вывод, что hot хорошо работает с SPA, а если нужно наблюдать статику или результат работы HTML-шаблонизатора (Pug, EJS и т.п. - всё, что в итоге гонится через HtmlWebpackPlugin), её желательно складывать в отдельную директорию и следить за изменениями как раз с помощью contentBase + watchContentBase. В create-react-app как-то так реализовано: HTML-шаблон лежит в public и при его изменениях происходит refresh, а при изменениях в src происходит HMR.

target: "web"

а для чего эта опция должна быть добавлена?
как понял из доки, так стоит по дефолту

не нужно ее добавлять. Она по-умолчанию и так web

можно же как-то сделать так, чтобы watchContentBase смотрел только за html в dist, а hot - за всем остальным (в dist)?

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

хм, в доке у дев сервера нету такой опции..