如何在“webpack”中处理base64图像？

Question

我在我的项目中使用了webpack。我正在尝试使用toastr

Toastr css文件在url中使用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？

Answer 1

这个问题已经解决了。

我把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')
    },