mini-css-extract-plugin css background 问题

来源：3-7 webpack对icon-font和图片的处理

kylinthinker

2018-09-25

我用webpack 4的版本，从网上看只能用mini-css-extract-plugin 来分离css文件，
现在问题是css中如果有引用图片就不行，比如 background: #00ff00 就可以，
带上图片就不行了 background: #00ff00 url(“1.png”);
就报错 You may need an appropriate loader to handle this file type.
想问问老师这个怎么解决

写回答

2回答

kylinthinker

提问者

2018-09-27

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

var getHtmlConfig = function(name) {
    return {
        template: './src/view/' + name + '.html',
        filename: 'view/' + name + '.html',
        inject: true,
        hash: true,
        chunks: [name]
    }
}

var config = {
    entry: {
        index: './src/page/index/index.js',
        login: './src/page/login/index.js',
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "css/[name].css"
        }),
        new HtmlWebpackPlugin(getHtmlConfig('index')),
    ],
    module: {
        rules: [{
                test: /\.css$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                        options: {}
                    },

                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                ]
            },
            {
                test: /\.(gif | png | jpg)$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        limit: 100,
                        name: 'image/[name].[ext]',
                    }
                }, ]
            },
        ]
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'js/[name].js',
    }
};

module.exports = config;

老师帮我看看，url-loader的规则也配置了啊

Rosen

正则里有空格？

2018-09-27

共1条回复