如何指定图片的打包路径

@ckinmind 2017-01-08 06:28:41发表于 ckinmind/ReactCollect webpack

在js里直接引入图片,然后最后打包的时候发现图片的路径不对,如何配置图片的打包路径

参考资料:webpack踩坑之路 (2)——图片的路径与打包

webpack.config.js

module.exports = {
  entry: './main.js',
  output: {
    path: 'dist',
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192&name=images/[name].[hash:8].[ext]'}
    ]
  }
};
  1. 在url-loader的最后添加name=images/[name].[hash:8].[ext], 它会将图片原名加上一个8位的hash码,然后存放到images文件夹下
  2. 注意output里面的path配置,我之前配置的是path:'dist/js' 这样打包后的bundle.js就会放到js目录下,但是这样做之后发现打包的图片文件夹images也被打包放到了js文件下,如果去掉path中的js,则bundle.js就无法放到js下,最后尝试是改变filename,变成filename:'js/bundle.js' ,再打包时nbundle.js就在js目录下了,imges文件夹也和js文件夹同级