如何處理webpack中的base64圖像？

我在我的項目中使用webpack。我試圖用toastr 如何處理webpack中的base64圖像？

Toastr CSS文件使用的base64在網址如下所示：

#toast-container > .toast-success { 
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;}

以下是我的WebPack配置：

'use strict' 

var webpack = require('webpack'); 
var path = require('path'); 
var extractTextWebpackPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
devtool: 'cheap-module-eval-source-map', 
entry: [ 
    './modules/index.js' 
], 
output: { 
    path: path.join(__dirname, 'public'), 
    filename: 'bundle.js' 
}, 
module: { 
    noParse: [ 
     /aws\-sdk/, 
    ], 
    loaders: [{ 
      test: /\.css$/, 
      exclude: /node_modules/, 
      include: path.resolve(__dirname, 'public/stylesheet'), 
      loader: extractTextWebpackPlugin.extract('style-loader', 'css-loader') 
     }, 

     { 
      test: /\.js$/, 
      exclude: /node_modules/, 
      include: __dirname, 
      loaders: ['babel'] 
     }, 
     { 
      test: /\.(png|jpg|svg)$/, 
      exclude: /node_modules/, 
      loader: 'url-loader?limit=2000', 
      include: [ 
       path.resolve(__dirname, 'public') 
      ] 
     } 
    ] 
}, 
plugins: [ 
    new extractTextWebpackPlugin("styles.css") 
] 
}

當我在終端我跑webpack得到錯誤

ERROR in ./~/toastr/build/toastr.css 
Module parse failed: /Users/Admin/Downloads/kamal/development/client-app/node_modules/toastr/build/toastr.css Unexpected token (1:0)

如何我可以使用webpack處理base64 url嗎？

來源

2016-09-18 ksharifbd

我想這件事情烤麪包機需要一些特定的CSS加載器。並且可能在它自己的package.json中缺少它。嘗試將它添加到你的package.json的開發依賴項「css-loader」n然後給它一個鏡頭。 –

@FaisalMushtaq我在package.json的開發依賴項中有'css-loader'和'style-loader'。但仍然收到錯誤。 – ksharifbd

@FaisalMushtaq謝謝。問題解決了。我排除了node_modules。我將所需的文件添加到包含數組中。 – ksharifbd

此問題已解決。

我排除了node_modules。由於css-loader配置爲排除node_modules，因此無法處理toastr.css文件。只要消除exclude: /node_modules/。

在這種情況下，正確的配置如下：

loaders: [{ 
     test: /\.css$/, 
     include: path.resolve(__dirname, 'public/stylesheet'), 
     loader: extractTextWebpackPlugin.extract('style-loader', 'css-loader') 
    },

來源

2016-09-29 04:44:22 ksharifbd

如何處理webpack中的base64圖像？

回答

相關問題