css引用图片,使用webpack打包后找不到图片?

想使用webpack进行程序打包,我一个css中引用了一个图片地址,执行build之后,想把这个图片放在images这个文件夹下,但是打包后css中之前指定的地址找不到了。
比如我在一个css中的代码如下:

body{
    background: url('../images/pic.png') no-repeat center center;
}

我的文件目录为:
--assets
--css

--style.css

--images

--pic.png

--index.js

我的webpack配置如下:

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin")
const CleanWebpackPlugin = require("clean-webpack-plugin")
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname, "/dist"),
        filename: "static/[hash].js",
        publicPath:"dist/"
    },
    resolve: {
        alias: {
            // Utilities: path.resolve(__dirname, 'src/utilities/'),
        },
        extensions: [".js", ".vue"]
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        },
        // {
        //     test: /\.css$/,
        //    use: ['style-loader','css-loader' ]
        // },
        {
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader, "css-loader"]
        },
        {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'url-loader',
            options: {
                limit: 1000,
                name: '[name].[ext]',
                outputPath: '../images/'
            }
        },
        {
            test: /\.(eot|ttf|woff|woff2)$/,
            loader: 'url-loader',
            options: {
                limit: 1000,
                name: '[name].[ext]',
                outputPath: './static/fonts/'
            }
        }
        ]
    },
    plugins: [  //修改点2
        new HtmlWebpackPlugin({
            template: "./index.html"
        }),
        new MiniCssExtractPlugin({
            filename: "[name].[chunkhash:8].css",
            chunkFilename: "./static/css/[id].css"
        }),
        new CleanWebpackPlugin(['dist']),
        new webpack.NoEmitOnErrorsPlugin()   //出错时只打印错误,但不重新加载页面
    ]
}

打包后会报错:图片描述

webpack会默认把我的图片打包在css文件夹下。

具体应该怎么配置?

阅读 2.6k
评论 2018-04-27 提问
    1 个回答

    那不是把你的图片打包到css下了,而是css里的路径被改成了按照css查找。


    之前没注意你用的 webpack4,配置在MiniCssExtractPlugin的loader部分。

    loader: MiniCssExtractPlugin.loader,
    options: {
      /*
      * 复写css文件中资源路径
      * webpack3.x配置在extract-text-webpack-plugin插件中
      * 因为css文件中的外链是相对与css的,
      * 我们抽离的css文件在可能会单独放在css文件夹内
      * 引用其他如img/a.png会寻址错误
      * 这种情况下所以单独需要配置../../,复写其中资源的路径
      */
      publicPath: '../../' 
    }
    评论 赞赏
      撰写回答

      登录后参与交流、获取后续更新提醒