php引用后图片路径问题,webpack,_webpack中引用图片路径的问题，webpack - phpStudy

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也能找到图片？这是为什么？应该是前者才是正确的

相关阅读:

如何让程序错误后 再执行一次

为什么在js高级程序设计书上，后两行代码的返回值为true?而我测试的结果却是false?

使用python的sax方式，如何解析xml下面的多级节点

js对象是按键自动排序的吗？下面这个对象怎么让-1再最前面啊？

使用bootstrap怎么实现pc端左对齐，移动端居中的效果？

JavaScript编译的问题

jQ源码中parent.nodeType !== 11的疑问

js如何new 5000个对象，传不同的参数并且不耗费大量内存

使用weexpack打包weex应用imagepineline包下载不下来怎么办。

使用swoole编写的Websocket服务端运行之后出现大量php进程？

如何在子组件中 动态修改 父组件 中的属性值

请问如何使用react native 开发一个展示广告的简单安卓app

2048界面不能屏幕自适应

fis3 打包问题

angluarjs嵌套ajax调用 Promise写法

Android中抽象方法赋值时出现null.

python 字符串操作，空格对齐

vue.js 2.0 父组件props过来的data 在子组件模板直接使用报错

类似这样跨行跨列，展示考勤数据的table在前端如何实现，有什么好的js插件可用？

tp5.0,怎么调用同控制器的方法?