简体   繁体   中英

extract-text-webpack-plugin output css file, image path wrong?

When I use extract-text-webpack-plugin output css file into a folder, the image url is wrong, my webpack config is below:

"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')
    ]
};

my output 'build' folder tree like this:

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

But in my output css file the image url is 'images/arrow.png', what I want is like '../images/arrow.png'.

Then I add the extract-text-webpack-plugin options like below:

Change:

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

To:

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

But the parameter 'publicPath' doesn't work, in my output css file the image url is still 'images/arrow.png'.

My package.json is like bellow:

{
  "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"
  }
}

Why don't you use output.publicPath which actually specifies the public url of your output files? This works for me well.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM