extract-text-webpack-plugin輸出css文件，圖像路徑錯誤？

Question

當我使用提取文本-的WebPack-插件輸出css文件到一個文件夾，圖片網址是錯的，我的WebPack配置低於：

"use strict"; 
var path = require('path'); 
var webpack = require('webpack'); 

// webpack plugins 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 


module.exports = { 
    entry: path.resolve(__dirname, 'app/scripts/main.js'), 
    output: { 
     path: path.resolve(__dirname, "build"), 
     //publicPath: path.resolve(__dirname, "build"), 
     filename: 'js/[name]-[hash].js' 
    }, 
    module: { 
     loaders: [{ 
       test: /\.jsx?$/, 
       loader: 'babel',  
       exclude: /(node_modules|bower_components)/, 
       query: { 
        presets: ['react', 'es2015'] 
       } 
     },{ 
       test: /\.scss$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: ExtractTextPlugin.extract('style', 'css!sass!postcss') 
     },{ 
       test: /\.css$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: ExtractTextPlugin.extract('style', 'css!postcss') 
     },{ 
       test: /\.(woff|woff2|svg|eot|ttf)/, 
       loader: 'url?prefix=font/&limit=10000' 
     },{ 
       test: /\.(png|jpe?g|gif|svg)$/, 
       loaders: [ 
        'file?name=images/[name].[ext]', 
        //'image-webpack' 
       ] 
      } 
     ] 
    }, 

    // image handle 
    // imageWebpackLoader: { 
    // progressive: true, 
    // optimizationLevel: 3, 
    // interlaced: false, 
    // pngquant: {quality: "65-70", speed: 4} 
    // }, 

    postcss: [ 
     require('autoprefixer') 
    ], 

    plugins: [ 
     new webpack.BannerPlugin('This file is created by yugasun'), 
     new HtmlWebpackPlugin({ 
      title: 'RedChild', 
      template: __dirname + '/app/template/index.tmpl.html' 
     }), 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new webpack.optimize.UglifyJsPlugin(), 
     new ExtractTextPlugin('css/[name]-[hash].css') 
    ] 
}; 

我的輸出「打造」的文件夾樹這樣的：

. 
├── css 
│   └── main-72c33a6c0ad73a5a0403.css 
├── images 
│   ├── arrow.png 
| |..... 
│   └── wrong_title.png 
├── index.html 
└── js 
    └── main-72c33a6c0ad73a5a0403.js 

但在我的輸出css文件中，圖片url是'images/arrow.png'，我想要的是'../images/arrow.png'。

然後我加入提取物，文本的WebPack-插件選項象下面這樣：

變化：

new ExtractTextPlugin('css/[name]-[hash].css') 

要：

new ExtractTextPlugin('css/[name]-[hash].css', { 
      publicPath: '../' 
     }) 

但參數 'publicPath' 不工作，在我的輸出CSS文件中，圖片url仍然是'images/arrow.png'。

我的package.json像波紋管：

{ 
    "name": "h5-webpack-template", 
    "version": "1.0.0", 
    "description": "H5 Develop template.", 
    "main": "bundle.js", 
    "scripts": { 
    "dev": "webpack-dev-server --progress --colors --content-base build --port 8014 --host 0.0.0.0", 
    "build": "NODE_ENV=production webpack --config ./webpack.production.js --progress" 
    }, 
    "repository": { 
    "type": "git", 
    "url": "git+https://github.com/yugasun/H5%2Bwebpack.git" 
    }, 
    "keywords": [ 
    "webpack", 
    "ES6", 
    "HTML5" 
    ], 
    "author": "yugasun", 
    "license": "MIT", 
    "devDependencies": { 
    "autoprefixer": "^6.4.0", 
    "babel-core": "^6.13.2", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.13.2", 
    "babel-preset-react": "^6.11.1", 
    "clean-webpack-plugin": "^0.1.10", 
    "css-loader": "^0.21.0", 
    "extract-text-webpack-plugin": "^1.0.1", 
    "file-loader": "^0.8.5", 
    "html-webpack-plugin": "^2.22.0", 
    "image-webpack-loader": "^2.0.0", 
    "imagemin-webpack-plugin": "^1.0.8", 
    "node-sass": "^3.4.2", 
    "normalize.css": "^4.2.0", 
    "postcss-loader": "^0.9.1", 
    "sass-loader": "^3.1.2", 
    "style-loader": "^0.13.0", 
    "url-loader": "^0.5.7", 
    "webpack": "^1.13.2", 
    "webpack-dev-server": "^1.15.2", 
    "webpack-spritesmith": "^0.2.6" 
    }, 
    "bugs": { 
    "url": "https://github.com/yugasun/H5%2Bwebpack/issues" 
    }, 
    "homepage": "https://github.com/yugasun/H5%2Bwebpack#readme", 
    "dependencies": { 
    "weui": "^0.4.3" 
    } 
} 

Answer 1

你爲什麼不使用output.publicPath這實際上指定輸出文件的公開網址？這對我很好。