2016-09-15 3 views
3

私はフォルダに抽出・テキストのWebPACK - プラグインの出力のCSSファイルを使用する場合は、画像のURLが間違っている、私のWebPACKの設定は以下の通りです:extract-text-webpack-plugin出力のCSSファイル、画像パスが間違っていますか?

"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" 
    } 
} 
+0

あなたのパブリックパスのコメントを外して、結果に驚くでしょう – smnbbrv

+0

それは動作しません – Yuga

+0

'output.publicPath'を'/' – robertklep

答えて

0

はなぜあなたが実際にあなたの出力ファイルの公開URLを指定output.publicPathを使用していませんか?これは私にとってはうまくいく。

関連する問題