配置了url-loader，webpack打包生成了resource文件夹 ，点击dist中view里的index.html文件图片不显示 ，

Question

3-7 webpack对icon-font和图片的处理 这节里 我按照老师写的配置了url-loader，然后通过webpack打包也生成了相应的resource文件夹 但是我点击dist中view里的index.html文件图片不显示 ，

Answer 1

Rosen 2017-11-27 13:39:19

应该是编译那报错了，或者图片路径错了

• 提问者 醉SHENG梦SI #1

  我的编译通过了

• 提问者 醉SHENG梦SI #2

  编辑通过了，dist文件夹里resource也有图片的，就是通过index页面访问的时候，图片显示不出来，报错，显示没有图片资源

• Rosen 回复 提问者 醉SHENG梦SI #3

  贴下报错的情况吧，或者qq找我，把代码扔我

点开查看后面2条评论

Answer 2

提问者 醉SHENG梦SI 2017-11-27 13:40:55

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;