Исключить каталоги в загрузчике webpack

Я пытаюсь использовать css-модули в своем проекте webpack, но я также использую некоторые css из пакетов в node_modules. Как написать загрузчик (ы), чтобы использовать модули только в моем каталоге module, а не в каталоге node_modules? Я попробовал следующее, но это пробки. Похоже, он пытается применить материал модулей к css в node_modules.

  {
    test: /\.css$/,
    loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
    include: [
      path.resolve(__dirname, 'modules')
    ]
  },
  { 
    test: /\.css$/, 
    loader: 'style!css',
    include: [
      path.resolve(__dirname, 'node_modules')
    ]
  },

Ответ 1

Для тех, кто находит это сейчас (как и я), я получил это для работы, определив дополнительные правила exclude в моей конфигурации webpack:

{
  test: /\.css$/,
  loader: 'css-loader',
  exclude: /my_app_client_dir/,
  query: {
    modules: true,
    localIdentName: '[local]' // no funny stuff with node_modules resources
  }
},
{
  test: /\.css$/,
  exclude: /node_modules/,
  loader: 'css-loader',
  query: {
    modules: true,
    localIdentName: '[name]__[local]___[hash:base64:5]'
  }
}

При написании этого без правил исключения на обоих загрузчиках я получил ошибку компиляции из webpack.

Ответ 2

Вы также можете исключить каталог node_modules:

{
    test: /\.css$/, 
    loader: 'style!css',
    exclude: /node_modules/,
}

Ответ 3

От: https://webpack.js.org/configuration/module/#condition

В то время использовалась версия веб-пакета: 4.39.3

            {
                test: /.(ts|tsx)?$/,
                loader: 'ts-loader',
                include: [path.resolve(__dirname, 'frontend')],
                exclude: {
                    or: [
                        path.resolve(__dirname, 'frontend/typings'),
                        path.resolve(__dirname, 'frontend/data')
                    ]
                },
                options: {
                    // disable type checker - we will use it in fork plugin
                    transpileOnly: true
                }
            },

Также возможно использовать and, not в дополнение к or, как показано выше.