Question

我正在尝试使用webpack和extract-text-webpack-plugin创建两个单独的捆绑文件。

第一个是全局捆绑包（global.module.css），它会编译整个应用程序中使用的 all css / scss。一切正常。但是，我还想创建一个单独的捆绑文件（resources.bundle.css），它仅从进一步嵌套在应用程序中的文件夹Resources中拉出CSS文件。（我需要分别使用Resource文件夹中的样式。）因此，resources.bundle.css是global.module.css内容的一部分。

通过启动ExtractTextPlugin的两个实例，我已经成功导出了两个单独的捆绑文件：

const extractSCSSModules = new ExtractTextPlugin('global.bundle.css')
const resourceExtractSCSS = new ExtractTextPlugin('resources.bundle.css')

但是，两个文件具有相同的内容。在使用modules.exports定义模块时，我尝试创建两个单独的加载器，每个加载器具有相应的入口点（一个用于整个应用程序，一个用于Resources文件夹），如下所示：

 {
      test: /\.module\.(css|scss)$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            query: {
              modules: true,
              importLoaders: true,
              localIdentName: '[name]__[local]__[hash:base64:5]',
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: 'autoprefixer',
            },
          },
          'sass-loader',
          {
            loader: 'sass-resources-loader',
          },
        ],
      }),
      include: path.join(ROOT_PATH, 'frontend', 'js'),
      exclude: path.join(ROOT_PATH, 'frontend', 'css'),
    },
{
      test: /\.module\.(css|scss)$/, 
      use: magazineSCSSExtract.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader'],
      }),
      include: path.join(ROOT_PATH, 'frontend', 'js', 'nestedFolder', 'nestedFolder', 'Resources'),
},

但是，由于ExtractTextPlugin的第一个实例测试了所有的css / scss文件，因此我指定第二个路径名的第二个实例只是重复。因此，它首先被实例覆盖。

那么，如何创建ExtractTextPlugin的单独实例，以导致单独的捆绑文件具有不同的内容？为此，我需要一个单独的模块构建吗？重申一下，问题不是如何创建单独的捆绑软件文件，而是如何基于文件位置进行创建，即使它们都在测试css / scss文件和即使< / em>第二个捆绑软件的内容已包含在第一个捆绑软件中。就目前而言，include不会导致运行样式加载器的输出之间出现任何分隔。

谢谢！

extract-text-webpack-plugin的多个实例创建了多个捆绑文件，但都具有相同的内容

0 个答案: