extract-text-webpack-plugin的路径问题

开发过程中遇到了一个坑,搞了一天才解决,特此记录

我开发的前端项目用的是webpack+vue,打包的时候把代码打包到'www'文件夹下
文件结构如下:

我用的webpack配置是之前的领导配置的,平时都没问题,一直没注意,这次项目要求改打包后的目录,要求把css,图片,字体图标,js等等全打包到static文件夹下,如图

这里修改下webpack里面的output路径即可,于是我做出以下改动
这里修改js的路径

output: {
        path: resolve('../www'),
        chunkFilename: 'static/js/[name].[chunkhash:8].js',
        filename: 'static/js/[name].[chunkhash:8].js'
    },

这里修改图片字体等路径

        {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                outputPath: "static/images/",
                limit: 10000,
                name: "[name].[hash:8].[ext]"
            }              
        }, {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                outputPath: "static/fonts/",
                limit: 10000,
                name: "[name].[hash:8].[ext]"
            }              
        }, {
            test: /\.(swf|mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                outputPath: "static/media/",
                limit: 10000,
                name: "[name].[hash:8].[ext]"
            }              
        }

重点来了…我用的extract-text-webpack-plugin来提取css成单独的文件,配置如下:

new ExtractTextPlugin({
           filename:"static/css/[name].[chunkhash:8].css"
        }),

到这里,所有样式,图标,字体,全部打包到static路径下了
但是运行后报错,所有的图标,图片都找不到

根据控制台显示,路径里面多了一个static,这个问题让人百思不得其解,经过查资料,原来是extract-text-webpack-plugin这个插件的问题,这个插件能抽取css成独立的css文件,摆脱了js引入css的麻烦,但是
由于我们是将样式文件单独打包，所以图片的引用是相对于css文件的。因此要修改url-loader的参数，需要修改publicPath
我之前设置的publicPath是"…/",去外层的目录,根据我打包后文件目录结构,仔细想想,css文件在static/css目录下,外层是static目录,所以出现了多了一个static的现象,
于是我把publicPath改为了"../../",终于解决了这个困扰我许久的问题