webpack 打包 CSS框架时的资源路径问题

Question

使用extract-text-webpack-plugin插件，将css文件自身打包成了一个独立的文件，但是css文件中引用的一些SVG，PNG，font文件等等还是在默认的output的地方，导致了路径的错误（页面中一些icon显示不出来），请问该如何修改，保证CSS文件中的引用路径还是可用的？webpack配置文件以及目录结构如下（可以看到CSS是独立出来了，但是引用的一些资源文件打包到了js文件夹下）：

const path = require('path');
const CommonsChunkPlugin = new require("./node_modules/webpack/lib/optimize/CommonsChunkPlugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  entry: {
    'login': path.resolve(__dirname, './src/pages/login/index.js'),
    'user': path.resolve(__dirname, './src/pages/user/index.js')
  },
  output: {
    path: path.resolve(__dirname, './dist/js'),
    filename: '[name].js'
  },
  plugins: [
    new CommonsChunkPlugin({
      name: 'common',
      minChunks: 2
    }),
    new ExtractTextPlugin('../css/[name].css')
  ],
  module: {
    rules: [{
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        use: ['css-loader']
      })
    }],
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: ExtractTextPlugin.extract('url-loader?limit=10000&mimetype=application/font-woff')
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: ExtractTextPlugin.extract('file-loader')
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loader: ExtractTextPlugin.extract('file-loader')
      }
    ]
  }
};

Answer 1

你output里面的path字段定义的好别扭。

    output: {
        path: path.resolve(__dirname, './dist')
    },
    plugins: [
        // xxxx
        new ExtractTextPlugin('css/[name].css')   // 这个插件的路径是相对于output里面定义的path下的。 
    ]

Answer 2

extract-text-webpack-plugin用的时候 要给output设置publicPath - -
设置publicPath为以页面为准的相对路径，或者以项目根目录为准的绝对路径，然后file-laoder会在那个路径下建立一个images文件夹，把图片搬过去- -路径也是对的

https://segmentfault.com/q/10...本站很多参考可以看看

ps:publicPath很麻烦- -webpack-dev-server html生成 css图片字体分离路径 ensure分包的路径。。等都要听它的 多研究