配置了url-loader，webpack打包生成了resource文件夹 ，点击dist中view里的index.html文件图片不显示 ，
来源：3-7 webpack对icon-font和图片的处理
醉SHENG梦SI
2017-11-27
3-7 webpack对icon-font和图片的处理 这节里 我按照老师写的配置了url-loader，然后通过webpack打包也生成了相应的resource文件夹 但是我点击dist中view里的index.html文件图片不显示 ，
2回答
-
应该是编译那报错了，或者图片路径错了
052018-06-11 -
醉SHENG梦SI
提问者
2017-11-27
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var getHtmlConfig = function(name){
return{
template:'./src/view/'+name+'.html',
filename:'view/'+name+'.html',
inject:true,
hash:true,
chunks:['common',name]
}
}
var config = {
entry:{
//多个js文件如果文件
'common': ['./src/page/common/index.js'],
'index' : ['./src/page/index/index.js'],
'login' : ['./src/page/login/index.js']
},
output:{
path:'./dist',
filename:'js/[name].js'
},
externals:{
'jquery':'window.jQuery'
},
module:{
loaders:[
{
test:/\.css$/,
loader:ExtractTextPlugin.extract("style-loader","css-loader")
},
{
test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=100&name=resource/[name].[ext]'
//test:/\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/,
//loader:'url-loader?limit=1000&name=resource/[name].[ext]'
// options: {
// limit: 100,
// name: 'resourse/[name].[ext]'
// }
}
]
},
plugins:[
//打包独立的公用的base.js文件
new webpack.optimize.CommonsChunkPlugin({
name:'common',
filename:'js/base.js'
}),
//把css按照名称单独达到文件里
new ExtractTextPlugin("css/[name].css"),
//打包html的模块
new HtmlWebpackPlugin(getHtmlConfig('index')),
new HtmlWebpackPlugin(getHtmlConfig('login')),
]
};
module.exports = config;
00
相似问题