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

Question

我在我的样式表中使用图像（更少），方法是：

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

当使用 HMR 时，它们被 base64 编码到样式表中，我对此很满意。但是，在为生产编译时，我希望图像不嵌入样式表中。 url-loader and 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]'
}

更新： 原来禁用 less-loader 会阻止 URL 在使用 url-loader 时被编码（但是图像仍然无效）但在使用文件加载器时无效。

更新 2： 在 css!less!postcss 加载器的末尾添加了一个自定义加载器，并且源仍然具有 [=19= 的图像 URL ] 所以问题似乎更进一步。还尝试删除 ExtractTextPlugin 但是为图像编译的 JS 然后具有用于导出的 Base64 编码值，就像 CSS 一样。

Answer 1

似乎有 2 个 ExtractTextPlugins（对于 css 和 less 测试导致了问题）因为我没有任何 css 文件我删除了第一个和它现在按预期工作。

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

Webpack file-loader and images in CSS

css

image

urlloader

webpack

webpack-file-loader