Webpack文件加载器和CSS中的图像-Java 学习之路

我通过以下方式在样式表中使用图像（更少）

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

使用HMR时，他们很好 . 但是，在编译生产环境时，我希望图像不要嵌入样式表中 . 我已经尝试了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上）加载器配置：

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

Update: 关闭禁用less-loader在使用url-loader时停止编码URL（但图像仍然无效），但在使用文件加载器时则不然 .

Update 2: 在 css!less!postcss 加载器的末尾添加了一个自定义加载程序，并且源仍然具有 ../images/foo.png 的图像URL，因此看起来问题就在下面了 . 还尝试删除 ExtractTextPlugin 但是为图像编译的JS然后像CSS一样具有导出的Base64编码值 .

1 回答

1

似乎有2个ExtractTextPlugins（用于 css 和 less 测试导致问题），因为我现在正按预期工作 .

回复于 2024-04-27T15:13:35+08:00

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

1 回答

相关问题