webpack 打包后图片加载报错的解决办法_Javascript

使用webpack打包后，图片没有加载出来，页面空白，报错图片引用的路径不对

解决办法：

1.找到config->index.js

将 assetspublicpath: '/', 改为 assetspublicpath: './'

build: {
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsroot: path.resolve(__dirname, '../dist'),
    assetssubdirectory: 'static',
    assetspublicpath: '/',       // 改为 assetspublicpath: './'
    ……
}

2.build->utils.js

找到下面这个函数的代码。

在if (options.extract) {
return extracttextplugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicpath:'../../'
})
}

代码里添加 publicpath:'../../'

 function generateloaders (loader, loaderoptions) {
    const loaders = options.usepostcss ? [cssloader, postcssloader] : [cssloader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: object.assign({}, loaderoptions, {
          sourcemap: options.sourcemap
        })
      })
    }
    // extract css when that option is specified
    // (which is the case during production build)
    if (options.extract) {     
      return extracttextplugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicpath:'../../'     // 添加 publicpath:'../../' 
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

有的问题使用第一种办法就可以解决，我有些图片放在全局，全局的图片没有打包出来，添加了第二种解决办法，图片解决了。

补充：

webpack 打包图片文件

一、准备工作

1. 在src文件夹中新建一个img文件夹，并且在里面放两张图片；

2.在css文件中引用图片，从而让webpack能够知道这个图片也是要打包的；

二、使用url-loader和file-loader

能打包图片的loader有url-loader、file-loader;二者的区别在于当图片的大小>url-loader中的limit时，那么webpack会选择使用file-loader来打包。关于如何在webpack中文官网找到loader并且如何使用请看我的其他文章。

1. 接下来看一下详细的url-loader配置:

重点放在options中的limit和name, limit的作用就是当要打包的图片大小>limit设置的值时，会使用file-loader进行打包。name的作用是对打包生成的图片文件进行命名规约；我来详细解释一下： img/的作用是在dist目录下会新建一个img文件夹用于存放图片；[name]是使用图片原本的名称;[hash:8]是通过哈希函数将图片的名字进行计算，然后取前8位;[ext]就是图片文件本身的后缀名。[name].[hash:8].[ext]就是用来生成文件名的，所以打包后图片最终的效果就是这样了：