webpack单独分离打包css，css里引用的图片路径错误，怎么解决？

Question

现在我的这个项目是将css和js单独打包出来，打包后的目录结构和打包前一致。

打包前：

从这张图可以看到，如果是css文件夹根目录下的css文件引用images文件夹下的图片应该使用../就可以了，如果是css下某一个文件夹下面的css引用图片的话，就要往上层目录跳两层../../

打包后：

webpack.config.js

var webpack = require('webpack');

var glob = require('globby') 

var utils = require('utils');

var htmlWebpackPlugin = require('html-webpack-plugin');

var nodeExternals = require('webpack-node-externals');

var CompressionPlugin = require("compression-webpack-plugin");

var ExtractTextPlugin = require('extract-text-webpack-plugin');

var CSS_PATH = {

  css: {

    pattern: ['./public/css/**/*.css' ,'!./public/css/index.css'],

    src: path.join(__dirname, './public/css/'),

    dst: path.resolve(__dirname, 'build/public/css/'),

  }

}

function getCSSEntries(config) {

  var fileList = glob.sync(config.pattern)

  console.log(fileList)

  return fileList.reduce(function (previous, current) {

    var filePath = path.parse(path.relative(config.src, current))

    var withoutSuffix = path.join(filePath.dir, filePath.name)

    previous[withoutSuffix] = path.resolve(__dirname, current)

    return previous

  }, {})

}

module.exports = [

  {

    target:'web',

    externals: [nodeExternals()],

    devtool: 'cheap-module-eval-source-map',

    context: path.resolve(__dirname),

    entry: getCSSEntries(CSS_PATH.css),

    output: {

      path: CSS_PATH.css.dst,

      filename: '[name].css'

    },

    module: {

      rules: [

        {

          test: /\.css$/,

          use: ExtractTextPlugin.extract({

            use: "css-loader",

            publicPath:'../'

          })

        },

        {

          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

          use: 'url-loader?limit=20000&name=[name].[ext]', 

        },

        {

          test: /\.scss$/,

          loaders: ["style", "css", "sass"]

        },

      ]

    },

    resolve: {

      extensions: ['.css']

    },

    plugins: [

      new ExtractTextPlugin('[name].css'),

    ]

  },

]

结果

打包完成后启动项目，本来那些css根目录下的css引用的图片路径有一部分错误了。

css根目录下的css文件图片路径

请问各位大神，这个问题用什么办法可以解决？可以把对应的图片打包到对应的文件夹下吗？我是一个webpack菜鸟，配置有点杂乱，望各位大神见谅！！！

Answer 1

path是webpack所有文件的输出的路径，必须是绝对路径比如：output输出的js,url-loader解析的图片，HtmlWebpackPlugin生成的html文件， 都会存放在以path为基础的目录下publicPath 并不会对生成文件的路径造成影响主要是对你的页面里面引入的资源的路径做对应的补全，常见的就是css文件里面引入的图片如题你需补一个 publicPath