Question

多个extract-text-webpack-plugin实例

我想做以下事情：

在一个精灵中合并许多SVG（通过svg-sprite-loader完成）。
将精灵提取为单独的文件（通过svg-sprite-loader / lib / extract-svg-plugin完成，通过extract-text-webpack-plugin完成的小包装，它只包含带有标签的结果以获得有效的svg标记）。 / LI>
使用片段标识符返回提取的SVG的路径，片段标识符引用特定的精灵符号，例如， sprite.svg#image。这是可行的，除非你想在CSS中引用SVG图像（通过提取插件提取），它也通过第二个提取插件实例提取。

webpack.config.js

var TextExtractPlugin = require('extract-text-webpack-plugin');

var CSSExtractor = new TextExtractPlugin('[name].css');
var SVGExtractor = new TextExtractPlugin('[name].svg');

module: {
  loaders: [
    {
      test: /\.css$/,
      loader: CSSExtractor.extract('css')
    },
    {
      test: /\.svg$/,
      loader: SVGExtractor.extract('raw') // emulate svg-sprite-loader
    }
  ]
}

styles.css的

.img {
  background-image: url('./image.svg');
}

CSS将编译为

.img {
  background-image: url([object Object]);
}

我认为这是因为在第一个（SVG）提取编译中，所有图像源都被extract-plugin删除，而在第二个（CSS）提取编译中，来自webpack的缓存模块结果为空内容。我试图修补提取插件加载器并返回一些结果而不是// // removed by extract-text-webpack-plugin，但没有成功。在第二个提取编译图像模块中仍然有空内容。是否可以使用提取插件实现所需的行为？

我用示例创建了GitHub repo。

多个extract-text-webpack-plugin实例

0 个答案: