webpack css分离打包后，图片的路径问题。

Question

webpack应用的一个个人demo项目中，css使用了

 output: {
        path: path.resolve(__dirname, './build'),
        filename: 'bundle.js'
    },


var ExtractTextPlugin = require("extract-text-webpack-plugin");
...
loader: ExtractTextPlugin.extract('style-loader','css-loader?modules')

test: /\.(png|jpg|jpeg|gif|svg)$/,
loader: 'url-loader?limit=10000&name=images/[hash:3].[name].[ext]'
...
plugins里面：
new ExtractTextPlugin("css/[name].css"),//生成的css样式文件

当运行，或者打包的时候，图片的路径出了问题，问题如下：

打包后，图片路径的引用成了css/imgages/....怎么成了这样，好奇怪！

我的文件引用是background:url('../images/name.png') no-repeat 100% 100%;
运行或者打包的时候成了这样了

GET http://localhost:7000/css/images/827.name.png 404 (Not Found)
报错了

Answer 1

设置一下publicPath

Answer 2

设置 publicPath 为绝对路径
eg:

output: {
    publicPath: '/',
},

Answer 3

遇到同样问题，各种测试，最终把问题定在了extract-text-webpack-plugin此插件上，如不使用此插件，将不会出现此问题，根源就在 new ExtractTextPlugin("css/[name].css") 前面的路径上，这个路径加载了原本正确的路径之前，导致了最终问题！

参考这个，不知是否有用

Answer 4

我自己有一个方法就是把

new ExtractTextPlugin("[name].css"),//生成的css样式文件

替换成这样，这样就避免了images在css文件里，可是这不是我想要的效果，这样的话，项目结构就有点不好了，css不再文件夹内。

还请路过的大神解决一下

Answer 5

表示今天遇到了这个问题，webpack版本是3.8.1,css-loader:0.28.7,看了下https://doc.webpack-china.org...，打包后的css文件中url不会被解析成css/...这个形式。

Answer 6

设置css-loader中的url选项可以解决这个问题

Answer 7

你最后是怎么解决这个的