javascript - webpack打包后图片路径出错

问题描述

问 题

loaders: [
    //小于8000KB的图片使用base64处理
    {
        test: /\.(jpg|png|gif)$/,
        loader:'url-loader?limit=8000&name=img/[name].[hash:8].[ext]'
    },

    {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
    }
]

plugins: [
    new HtmlWebpackPlugin({
        template: 'src/index.html',
        filename: 'index.html',
        hash: false
    }),
    new ExtractTextPlugin('css/[name].[hash:8].css')
]


如上配置，将把img图片打包到输出目录的img/ 中；把css图片打包到输出目录的css/ 中；
如果不使用ExtractTextPlugin将样式表单独输出，样式直接生成在页面上，
样式中的图片路径就是正确的如：url(img/a.jpg)。
可我现在的输出目录是这样的：
-dist
    +img
    +css
    +js
    index.html
    
样式表中的图片路径还是：url(img/a.jpg)，我期望的是：url(../img/a.jpg);
请问需要怎么处理呢？

已解决，感谢@麦芽糖。
解决方法：
将上面的loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
增加个publicPath配置，如下：
loader: ExtractTextPlugin.extract('style-loader', 'css-loader',{
        publicPath: '../'
    })

解决方案

ExtractTextPlugin有个 publicPath可以设置...，试试

这篇关于javascript - webpack打包后图片路径出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！