Exclude directories in webpack loader

Question

I am trying to use css modules in my webpack project, but I also use some css from packages in node_modules . How to write loader (s) to use modules only in my module directory, and not in the node_modules directory? I tried the following, but these are traffic jams. It looks like he is trying to apply the material of modules to css in 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') ] }, 

Answer 1

For those who find this now (like me), I got this to work by defining additional exclude rules in my webpack configuration:

 { 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]' } } 

When writing this without exception rules on both bootloaders, I got a compilation error from webpack.

Answer 2

You can also exclude the node_modules directory:

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

Answer 3

From: https://webpack.js.org/configuration/module/#condition

At that time, the version of the web package was used: 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 } }, 

It is also possible to use and , not in addition to or , as shown above.