Привет всем, Долго обнавляется webpack в режиме dev, а именно после изменений в scss.

module.exports = {
   context: path.resolve(__dirname, '../src'),

   entry: {
       main: ['./js/index.js', './scss/main.scss'],
   },

   mode: 'development',

   output: {
       filename: 'js/[name].js',
       path: path.resolve(__dirname, '../dist/'),
       publicPath: '/',
   },

   devServer: {
       contentBase: path.resolve(__dirname, '../src'),
       overlay: true,
       watchContentBase: true,
       port: 3000,
   },

   module: {
       rules: [
           {
               test: /\.(sa|sc|c)ss$/,
               use: [
                   {
                       loader: MiniCssExtractPlugin.loader,
                   },
                   {
                       loader: 'css-loader',
                   },
                   {
                       loader: 'postcss-loader',
                       options: {
                           config: {
                               path: path.resolve(__dirname),
                           },
                       },
                   },
                   {
                       loader: 'sass-loader',
                       options: {
                           includePaths: ['./node_modules'],
                       },
                   },
               ],
           },
           {
               test: /\.pug$/,
               loader: 'pug-loader',
           },
           {
               test: /\.svg$/,
               loader: 'svg-url-loader',
           },
           {
               test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
               use: [
                   {
                       loader: 'file-loader',
                       options: {
                           name: '[path][name].[ext]',
                           outputPath: './',
                           useRelativePach: true,
                       },
                   },
               ],
           },
           {
               test: /\.js$/,
               exclude: /node_modules/,
               use: [
                   {
                       loader: 'babel-loader',
                       options: {
                           plugins: ['transform-es2015-arrow-functions'],
                       },
                   },
               ],
           },
       ],
   },
   plugins: [
       new MiniCssExtractPlugin({
           filename: 'css/[name].css',
       }),
       ...PAGES.map(
           (page) =>
               new HtmlWebpackPlugin({
                   template: ${PAGES_DIR}/${page},
                   filename: ./${page.replace(/\.pug/, '.html')},
               })
       ),
       new CleanWebpackPlugin({
           cleanAfterEveryBuildPatterns: ['dist'],
       }),
       new OpenBrowserPlugin({ url: 'http://localhost:3000' }),
   ],
};

Подскажите в чем причина.

Скорее всего дело в том что webpack проходится по всем node_modules
{
 loader: 'sass-loader',
 options: {
 includePaths: ['./node_modules'],   <--
},

Укажи конкретно какой из модулей тебе необходимо инклюдить

Иначе он рекурсивно бегает по всем

Спасибо, попробую.👍

У тебя слишком много лоадеров подключено для дев режима

точнее, у тебя настройка для прода

svg-loader и file-loader перенесу на прод, что-то ещё можно ?

А каким образом это влияет на сборку SCSS ?

это не нужно в деве

А влияет то как?)

Нужно/не нужно понятие довольно относительное

с какой проблемой сюда пришел человек?

"...после изменений в scss"

Вот мне и интересно узнать как svg-loader и file-loader на это влияют)

я и сказал, что много лоадеров для scss

https://webpack.js.org/plugins/mini-css-extract-plugin/

Это почитать и заменить в деве MiniCssExtractPlugin.loader на style-loader

devMode ? 'style-loader' : MiniCssExtractPlugin.loader,