Как отделить css от js в webpack?

Question

[Wasya UK]

Уже пол дня ищу как отделить файлы стилей от js, при использовании entry. Ну я беру и скрипты и стили, и на выходе получаю стили и скрипты со стилей. Как вы исправляете такие ошибки? Искал как взять все файлы с папки, но publicPath не работает в MiniCssExtractPlugin.

{
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      }

plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
      chunkFilename: "css/[id].css",
    })
  ]

entry: [
    path.resolve(__dirname, '../src/js/main.js'),
    path.resolve(__dirname, '../src/sass/style.sass')
  ],

Answer 1

[Роман Сохин]

Важно понять что webpack это сборщик js модулей. На каждый entry вы будете получать бандл js.
В вашем случае нужно импортировать sass файл в main.js и далее вебпак их обработает и извлечет при помощи MiniCssExtractPlugin, который есть у вас в конфигурации. Т.е. entry (с sass файлом) нужно убрать. А файл стилей импортировать в main.js

import "some-path-name/style.sass"