webpack 踩坑之publicPath

publicPath: 顾名思义就是一个公共地址，用于处理静态资源的引用地址问题，比如图片的地址路径问题。尤其是在你打包图片生成的路径与html的不在同一个目录时，这个时候就必须用publicPath来指定图频引用径。

举例来说：

  module.exports = {
        output: path.resolve(__dirname, '../dist')
   }

ps：这个代码表示当前所有打包数据是在dist目录下

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/img/[name].[hash:7].[ext]'
        }
      },

这个是一个图片的loader，会在dist目录下面生成一个static/img文件夹存放打包的图片

image.png

如图所示，在a1.vue中引入一张图片，此时编译生成的js被a1.html引用，此时打包的图片和html不在同一个目录下。

在不加publicPath的情况下，默认为空，此时系统会从html的当前目录去找 目录为static/img 下的图片，当然就是找不到的

像当前这种情况就很需要去指定publicPath，使得图片能正确索引到。

publicPath可以设置相对地址，如果是相对地址是相对于当前的html，在本例中就是相对于a1.html，此时如果要让图片正确所引到，可以设置publicPath为 '../../../../'
2.另一种是设置成绝对地址：publicPath 设为相对于协议url（//）或http地址（http://），比如publicPath:'http://wwww.qinshenxue.com/static/'（开发环境不应该使用），使用这个的场景是将资源托管到CDN，比如公司的静态资源服务器等。设置绝对地址时应该以'/'结尾，同时其他loader或插件的配置不要以'/'开头。