webpack文件加载程序和CSS中的图像

Question

我正在使用stylesheet（少）中的图像：

.foo { background: url('../images/foo.png') }

使用HMR时，它们是base64被编码到样式表中，我很好。但是，在制作生产时，我希望图像不嵌入样式表中。我已经尝试了URL-LOADER和FILE-LOADER。

使用URL-Loader，我无法正确散发图像。如果我没有设置限制，则将文件排放到output/images/，并且具有正确的大小，但没有有效的图像。如果我将限制设置为小于8K的限制，则将图像排放到output并纠正。

在任何一种情况下，发射的图像都出现在CSS中（例如，将URL-loader与limit=1一起使用时）：

url(data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJhMDdjZWVkMGRiZTNlMjk5ODY5NWQ3ZjM4MzYxZDY1Zi5wbmciOw==);

当您解码时是：

module.exports = __webpack_public_path__ + "a07ceed0dbe3e2998695d7f38361d65f.png";

如何让CSS使用URL而不是尝试base64编码值？

这是我的webpack（仍在WebPack 1）加载程序配置：

{
    test: /.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
},
{
    test: /.css$/,
    loader: ExtractTextPlugin.extract('style-loader', 'css!postcss'),
},
{
    test: /.less$/,
    loader: ExtractTextPlugin.extract('style-loader', 'css!less!postcss'),
},
{
    test: /.(png|jpg|gif)$/,
    loader: 'file-loader?name=/images/[name].[ext]'
}

更新：结果禁用较小的加载程序在使用URL-LOADER时阻止URL被编码（但图像仍然无效），但在使用文件载荷时却无效。<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<</p>

更新2：在css!less!postcss加载程序末端添加了一个自定义加载程序，源仍然具有../images/foo.png的映像URL，因此似乎问题进一步延伸了。还尝试删除ExtractTextPlugin，但图像的编译JS然后像CSS一样具有导出的base64编码值。

Answer 1

似乎拥有2个ExtractTextPlugins（对于css＆amp; less测试引起了问题），因为我没有任何CSS文件，我删除了第一个，并且现在按预期工作了。