Webpack文件加载器和CSS中的图片

Question

我正在使用图片在我的样式表（less）中，通过以下方式完成：

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

使用HMR时，它们被编码为base64格式并嵌入到样式表中，这对我来说没问题。但在生产环境下编译时，我不希望图像被嵌入到样式表中。我尝试过使用url-loader和file-loader。使用url-loader时，我无法正确地发出图像。如果我不设置限制，则文件会被发出到output/images/并具有正确的大小但不是有效的图像。如果我将限制设置为小于8k，则图像将被发出到output并且正确。在任一情况下，发出的图像都会出现在CSS中，例如（当使用limit=1的url-loader时）：url(data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJhMDdjZWVkMGRiZTNlMjk5ODY5NWQ3ZjM4MzYxZDY1Zi5wbmciOw==);解码后为：

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

如何让css使用URL而不是尝试对值进行base64编码？

这是我的webpack（仍在使用webpack 1）loaders配置：

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

更新：事实证明，禁用less-loader会阻止使用url-loader时对URL进行编码（但图像仍无效），但使用file-loader则不会。

更新2：在css!less!postcss加载器的末尾添加了一个自定义加载器，源代码仍然具有../images/foo.png的图像URL，因此问题似乎更深入。还尝试删除ExtractTextPlugin，但编译后的JS文件中的图片导出值仍然像CSS一样进行了Base64编码。

- DEfusion

Answer 1

看起来拥有2个ExtractTextPlugins（用于css和less测试）会导致问题，因为我没有任何css文件，所以我删除了第一个，现在它按预期工作。

- DEfusion