webpack打包img和css时如何保留子文件夹？

Question

1.使用url-loader和extract-text-webpack-plugin这俩插件处理css和img时最后打包后如何保留子目录结构呢？而不是全部在css/,images/下？

2.比如我有这样的结构

我目前打包是所有css/都通过这个extract-text-webpack-plugin的设置，（下图）

打包在css/下了，之前的common文件夹没有了，我还想实现打包后保留common子文件夹目录，该如何设置呢？还有img图片也是想保留子目录怎么设置？

图片时用url-loader处理的。

3.我还有个疑问webpack如何抽取公共的css呢？比如我在a.js require('base.css'),同样在b.js也 require('base.css'),这样这个base.css就会被extract-text-webpack-plugin打包到两个入口的css中了？怎么设置可以抽取公共的css出来呢？

Answer 1

You can accomplish both of these thing but it varies per plugin/loader.

ExtractTextWebpackPlugin

For extract-text-webpack-plugin, the filename property can actually be a function. It passes getPath to process the format like css/[name].css and returns the real file name, css/js/a.css. You can replace css/js with css then you will get the new path css/a.css.

plugins: [
  new ExtractTextPlugin({
    filename:  (getPath) => {
      return getPath('css/[name].css').replace('css/js', 'css');
    },
    allChunks: true
  })
] 

File Loader

For file-loader you can specify custom output and public paths by using the outputPath, publicPath and useRelativePath query name parameters (and also could be just option properties too):

use: "file-loader?name=[name].[ext]&publicPath=assets/foo/&outputPath=app/images/"

Shared CSS

When you use webpack.optimize.CommonsChunkPlugin, it should behave the same way with CSS as it does with JavaScript. You can find more information about its usage at our new webpack docs page (there is also a Chinese version click top right corner)

Hopefully this helps!