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

使用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]就是用来生成文件名的，所以打包后图片最终的效果就是这样了：       

       注意点1：那就是这个name它是使用file-loader打包才会有的效果哦，如果是url-loader进行打包，那么打包好的图片不会按照name的规则来生成，这个要注意一下。

      注意点2： 因为打包好的图片输出位置是在dist文件夹中，所以还需要一个配置：publicPath='dist/'      

      老实说我还没有办法说清楚它，但是加上去才能成功打包，所以先加上，等我后面知晓了它的作用我会补上它的作用的。

到此这篇关于webpack 打包后图片加载报错的解决办法的文章就介绍到这了,更多相关webpack 打包出错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论