javascript - 使用 extract-text-webpack-plugin，css 中不同目录的图片如何打包到指定目录？

Question

使用 extract-text-webpack-plugin 将 css 打包成文件。

里面引用的 background-url 图片路径不同，有
background: url(../images/index/advance.png)，
background: url(../images/about/img.png)

以上是我的项目结构，我把 src 下的 images 文件夹全部考到了 dist 目录（因为在我views文件夹下有大量的 html，里面通过 img 的 src 标签引入了大量图片，我也不知道有什么更好的处理图片资源的方法）

尝试使用以下配置，当图片大于限定值时会打包到 [path] 目录下

{
    test: /\.(png|jpg|gif)$/,
    loader: 'url-loader?limit=8192&name=[path][name].[ext]'
}

结果如下图，但是很明显路径不对了，请问怎么样配置才能使路径仍然为
../images/index/advance.png

Answer 1

1. 你不需要把src/images拷到dist目录里

2. [path]就是那个尿性的了，所以应该是没办法维持图片的文件目录结构的了

3. 其实你也不用管生成后的图片呐，都丢在dist/images目录里，最多加个[hash]来防止同名图片

你可以参考一下《webpack多页应用架构系列（六）：听说webpack连图片和字体也能打包？》