webpack中引用图片路径的问题

目录结构
├─build
├─node_modules
├─package.json
├─webpack.config.js
├─src # 当前项目的源码

├─fonts  
├─images
    ├─index 每个页面有一个放图片的文件夹
    ├─about 
    ├─
├─sass  
├─scripts     
└─templates
    ├─index.html
    ├─xxx.html
    

webpack配置文件

var path = require('path');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'src');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
var TEM_PATH = path.resolve(APP_PATH,'templates');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var entryPath = APP_PATH +'/scripts/';

module.exports = {

 entry : {
     main : entryPath + 'main/index.js',//主入口;
     choice : entryPath + 'bestChoice/bestChoice.js',//馆藏精选入口;
    pekingOpera : entryPath + 'pekingOpera/pekingOpera.js',//京剧入口
    specialExhibition : entryPath + 'speacilExhibition/specialExhibition.js',//专题特展入口
    recordDetail : entryPath + 'recordDetail/recordDetail.js',//唱片详情入口
    speacialDetail : entryPath + 'speacialDetail/speacialDetail.js',//专题详情页入口
    about : entryPath + 'about/about.js', //关于入口
    advanceSearch : entryPath + 'advanceSearch/advanceSearch.js',//高级检索入口
    classification : entryPath + 'classification/classification.js'//特色分类入口
 },
 devtool: 'eval-source-map',
 output : {
     path : BUILD_PATH,//文件输出的根路径
     filename : 'scripts/[name].js',
     //publicPath : '/'
 },
devServer: {    
    hot: true,
    inline: true,
    progress: true,
    port : 7777,
    proxy :{
        '/itemCategory/*':{
            target : 'http://localhost:8082',
            secure : false
        }
    } 
},
module :{
    loaders:[
        {
            test : /\.css$/,
            loaders : ['style-loader','css-loader']
        },
        {
            test: /\.scss$/,
            loaders: ['style-loader', 'css-loader', 'sass-loader'],
            include : APP_PATH
        },
        {
            test: /\.(png|jpg)$/,
            loader: 'url?limit=8192&name=images/[hash].[ext]'
         },
         {
             test : /\.jsx?$/,
             loader : 'babel',
             include : APP_PATH,
             query : {
                 presets:['es2015'] 
             }
         },
        {
            test :/\.(woff|woff2|svg|eot|ttf)\??.*$/,
            loader : 'file?name=fonts/[name].[ext]'
        }
    ]
},
plugins : [
    new HtmlwebpackPlugin({
         template : path.resolve(TEM_PATH,'index.html'),
         filename: 'index.html',
         chunks : ['main','vendors'],//需要引入哪几个js到页面
         inject: 'head',//插入head
         hash: true
    }),
    new HtmlwebpackPlugin({
        template : path.resolve(TEM_PATH,'choice.html'),
        filename: 'choice.html',
        chunks : ['choice','vendors'], 
        inject: 'head', 
        hash: true            
    }),
    new HtmlwebpackPlugin({
        template : path.resolve(TEM_PATH,'peking-opera.html'),
        filename: 'peking-opera.html',
        chunks : ['pekingOpera','vendors'],
        inject: 'head',
        hash: true            
    }), 
    new HtmlwebpackPlugin({
        template : path.resolve(TEM_PATH,'speacial-exhibition.html'),
        filename: 'speacial-exhibition.html',
        chunks : ['specialExhibition','vendors'], 
        inject: 'head', 
        hash: true            
    }), 
    new HtmlwebpackPlugin({
        template : path.resolve(TEM_PATH,'record-detail.html'),
        filename: 'record-detail.html',
        chunks : ['recordDetail','vendors'], 
        inject: 'head', 
        hash: true            
    }),
    new HtmlwebpackPlugin({
        template : path.resolve(TEM_PATH,'speacial-detail.html'),
        filename : 'speacial-detail.html',
        chunks : ['speacialDetail','vendors'], 
        inject: 'head', 
        hash: true              
    }),
    new HtmlwebpackPlugin({
        template : path.resolve(TEM_PATH,'about.html'),
        filename : 'about.html',
        chunks : ['about','vendors'], 
        inject: 'head', 
        hash: true              
    }), 
    new HtmlwebpackPlugin({
        template : path.resolve(TEM_PATH,'advance-search.html'),
        filename : 'advance-search.html',
        chunks : ['advanceSearch','vendors'], 
        inject: 'head', 
        hash: true  
    }),
    new HtmlwebpackPlugin({
        template : path.resolve(TEM_PATH,'classification.html'),
        filename : 'classification.html',
        chunks: ['classification','vendors'],
        inject : 'head',
        hash : true 
    }),
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        'window.$': 'jquery'
    }),//jq暴露到全局   
    new webpack.optimize.UglifyJsPlugin({minimize: true}),//代码压缩
    new webpack.optimize.CommonsChunkPlugin({
        name :'vendors',
        filename : 'scripts/[name].js',
        minChunks : 3,//被3个入口所引用的模块将会被视为公共代码打包到vendors中
    }),
    new ExtractTextPlugin("css/[name].css")
    
]

}

为什么在index.html中,img标签的src属性使用../images/index/xxx.png可以找到图片,而使用../src/images/index/xxx.png也能找到图片?这是为什么?应该是前者才是正确的

阅读 3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进