Я использую образы в моей таблице стилей (меньше) штраф, выполнив:Webpack файл-загрузчик и изображения в CSS
.foo { background: url('../images/foo.png') }
При использовании HMR они base64, закодированные в таблице стилей, которые я в порядке о , Однако при компиляции для производства я хочу, чтобы изображения не были встроены в таблицу стилей. Я пробовал и url-loader, и file-loader.
С url-загрузчиком я не мог заставить его правильно испускать изображения. Если я не установил никаких ограничений, файлы были испущены до output/images/ и имели нужный размер, но не были действительными изображениями. Если я установил предел на что-то меньшее, чем 8k, изображения были испущены на output и исправить.
В любом случае излучаемые изображения появились в CSS, как это (например, при использовании URL-погрузчик с 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]'
}
Update: Оказывается, отключив less-loader останавливает URL, из кодируются при использовании URL-загрузчик (но изображения все еще недействителен), но не при использовании файлового загрузчика.
Update 2: Добавлен пользовательский загрузчик в конце css!less!postcss погрузчиков и источник до сих пор образ URL из ../images/foo.png поэтому появляется вопрос далее вниз по линии. Также попытался удалить ExtractTextPlugin, но скомпилированный JS для изображения затем имеет закодированное значение Base64 для экспорта, как это делает CSS.