В итоге получается Compiled with *количество ошибок* errors
и ищи где ошибка)

а как сделать, чтобы для каждой entry, webpack собирал свои бандлы не включая пересечения между entry? включая динамические импорты, вендоры, и чтобы каждый бандл содержал это все только для себя

лишняя запятая в json соответственно он не валидный и не читается бабелем

а точно нет другого варианта?

исходя из того что я знаю о том как работает 4 вебпак - нету

другой вопрос, есть у меня 3 импорта, о которых я писал выше

import(/* webpackMode: "lazy", webpackChunkName: "toggler" */ '@markup/Roots/ChatCorner/Toggler').then(
  ({ default: TogglerRoot }) => {
    ImportContainer.set('togglerRoot', TogglerRoot)
  }
)

import(/* webpackMode: "lazy", webpackChunkName: "pager" */ '@markup/Roots/ChatCorner/Pager').then(
  ({ default: PagerRoot }) => {
    ImportContainer.set('pagerRoot', PagerRoot)
  }
)

import(/* webpackMode: "lazy", webpackChunkName: "invitation" */ '@markup/Roots/ChatCorner/Invitation').then(
  ({ default: InvitationRoot }) => {
    ImportContainer.set('invitationRoot', InvitationRoot)
  }
)

по сути эти импорты динамическими мне нужы только для того, чтобы получить 3 разных css на выходе (у мееня каждое приложение это iframe)

проблема - общий css для всех 3х апп (то есть есть css для каждого свой + общий) выглядит как toggler~pager~invitation.css, что не комильфо. Импорт общего кода выглядит во всех 3х приложениях как import '@styles/iframe-resetable.scss’

мне хотелось этот чанк (а он при сборке именно чанк) как-то контролировать, хотя бы его переименовать, а лучше вообще включить этот код в каждый чанк (toggler.css, pager.css, invitation.css). Как такое сделать?

import(/* webpackMode: "lazy", webpackChunkName: "toggler" */ '@markup/Roots/ChatCorner/Toggler').then(
  ({ default: TogglerRoot }) => {
    ImportContainer.set('togglerRoot', TogglerRoot)
  }
)

import(/* webpackMode: "lazy", webpackChunkName: "pager" */ '@markup/Roots/ChatCorner/Pager').then(
  ({ default: PagerRoot }) => {
    ImportContainer.set('pagerRoot', PagerRoot)
  }
)

import(/* webpackMode: "lazy", webpackChunkName: "invitation" */ '@markup/Roots/ChatCorner/Invitation').then(
  ({ default: InvitationRoot }) => {
    ImportContainer.set('invitationRoot', InvitationRoot)
  }
)

нужно сбилдить два отдельнх приложения - сбилди два отдельных приложения

в картинках

непонимаю, что есть 2 отдельных приложения в моем случаи?

optimization: {
  splitChunks: {
    chunks(chunk) {
      return false
    }
  }
},

решил разом все проблемы мои, и в том числе раскидал import @styles/iframe-resetable.scss про трем css файлам (cs чанки с import)

осталось допилить, чтобы react-dom (и другие пакеты) не был в каждом чанке, там где он требуется

Привет, ребят, может кто встречался с такой проблемой?

Почему-то именно с тайпскриптом получается так, что лоадер, который копирует все изображения используемые в стилях, в папку dist, конфликтует с плагином CopyWebpackPlugin, который копирует папку с картинками. А просто с JS такой проблемы нет)

То есть предполагаю, что это:

{
        test: /\.(png|jpe?g|gif|svg)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]',
          context: path.resolve(__dirname, "src"),
          outputPath: '/',
          publicPath: './',
          useRelativePaths: true
        }
}

конфликтует с этим:

new CopyWebpackPlugin({
      patterns: [
        { 
          from: 'src/img', 
          to: 'img',
        },
      ]
})

{
        test: /\.(png|jpe?g|gif|svg)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]',
          context: path.resolve(__dirname, "src"),
          outputPath: '/',
          publicPath: './',
          useRelativePaths: true
        }
}

new CopyWebpackPlugin({
      patterns: [
        { 
          from: 'src/img', 
          to: 'img',
        },
      ]
})

В общем, новый asset manager в 5 вебпаке меня спас. До сих пор хз, почему такая проблема была)

всем привет
подскажите
- как понять имя файла, который эмитнул лодер(file-loader) перед мной? парсить код es модуля регекспом не хочется
- как прочитать этот файл? вижу в апи лодера только input file system, а мне тут, наверное, output нужно. или можно не читать и где-то уже есть исходный буфер?

Всем привет, есть такая проблема с дев сервером, у меня сайт (поднятый на дев сервере) запрашивает данные с другого хоста и валится с ошибкой корс, можно ли как-то настроить дев сервер чтобы разрешить браузеру любой доступ к другим доменам не обращая на ошибки cors?

нет. это можно настроить только на том сервере. в этом весь смысл защиты

ну и я ж надеюсь, это дев окружение. у тебя ж не в проде дев-сервер?

да, локально, пролема в картинках, их url сохраняется в бд, и когда я делаю прокси на этот сервер ествественно мне прилетают url с другим доменом, не тот на котором у меня запущен dev сервер, так-то картинки отображаются. но мне нужно их обработать на канвасе, и оказывается он запрещает это делать https://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported пока единственный способ это делать прокси с вебпак дев сервера на хост хранилища картинок а при получении url с сервера вручную его парсить и подставлять хост дев сервера, но что-то такое себе

делай прокси, чтоб за картинками ходил дев-сервер