Question

我正在尝试在我的webpack项目中使用css-modules，但我也在node_modules中使用了一些css。如何编写加载程序以仅使用module目录中的模块而不是node_modules目录中的模块？我尝试了以下但它是borks。看起来它正试图将模块内容应用到node_modules中的css。

  {
    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

对于那些现在发现这一点的人（像我一样），我通过在我的webpack配置中定义补充exclude规则来实现这一目标：

{
  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收到编译错误。

Answer 2

您也可以排除node_modules目录：

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

Answer 3

来自：https://webpack.js.org/configuration/module/#condition

当时使用的

webpack版本为：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。

排除webpack加载器中的目录

3 个答案: