目录结构
├─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也能找到图片?这是为什么?应该是前者才是正确的