使用ExtractTextWebpackPlugin插件提取Css到单独目录时，css中设置的背景图片路径出错。

webpack的ExtractTextWebpackPlugin插件是用来提取文本内容到独立文件的，一般用来提取Css文件。

之前没有碰到过上什么问题，可是今天构建完成时发现有一个图片文件出现了404，看了下这张图片是在Css中设置的背景图片，使用import导入的另一张图片正常加载。

图片使用的的file-loader，设置如下：

1
2
3
4
5
6
7
8
9
10
{
    test: /\.(png|jpg|gif|svg)$/,
    use: [{
        loader: "file-loader",
        options: {
            name: "[name]-[hash].[ext]",
            outputPath: "images/"
        }
    }]
}

css文件是提取到css目录下的:

1
2
3
new ExtractTextPlugin({
    filename: "css/[name].[md5:contenthash:base64:10].css"
}),

file-loader替换了背景图片的路径，构建时为”images/xxx.png”，但是此时css被提取到css目录下，解析时会在css目录下找”images/xxx.png”，而images目录和css目录时平行的，所以出现了404。

发现这个问题后我看到ExtractTextWebpackPlugin插件提供了publicPath选项，感觉可以利用这个改变下背景图片构建后的路径，我试着把它设为”../“:

1
2
3
4
5
6
7
8
{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: "css-loader",
        publicPath: "../"
    })
},

重新构建，果然现在图片路径前面被加上了”../“,这样就可以正确的找到图片。

google了一下这种方法是可以的。