webpack打包后图片路径出错

Question

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: '../'

    })

Answer 1

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