webpack配置-打包后图片路径出错

zorpan 发布于2019-08-22 16:43 / 2710人阅读

摘要：配置图片路径出错问题项目在开发环境下工作正常，当打包后图片不见了，检查元素后发现路径出错了。打包后文件目录如下可以看到背景图片的路径应该是而实际却是，找到原因后就好解决了方法一查看目录下的配置，图片文件会经过处理。

webpack配置-图片路径出错 问题

项目在开发环境下工作正常，当打包后图片不见了，检查元素后发现路径出错了。
图片路径是这样：background: url(/static/img/bg_camera_tip.bd37151.png)，但该路径下文件并不存在。
打包后文件目录如下：

可以看到背景图片的路径应该是../../static而实际却是/static，找到原因后就好解决了

方法一

查看build目录下webpack.base.conf.js的配置，图片文件会经过url-loader处理。

 module: {
    rules: [
      ...
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: utils.assetsPath("img/[name].[hash:7].[ext]")
        }
      },
      ...
    ]
  }

它的作用是当文件大小小于limit限制时会返回一个base64串，其实就是把图片资源编码为base64串放在CSS文件里，这样就可以减少一次网络请求，因为每一张图片都是需要从服务端去下载的。但是如果文件太大了就会导致base64串很长，那放在CSS文件里面就会导致文件很大，CSS的文件下载时间变长，就得不偿失了，所以会有一个limit参数，在这个范围内的才会被转成base64串，它的单位是字节。对于这个问题，该loader还提供了一个publicPath参数，目的是修改引用的图片地址，默认是当前路径，那直接改它就可以了，即在options节点下添加一个参数publicPath: "../../"。

 module: {
    rules: [
      ...
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          publicPath: "../../", //你实际项目的引用地址前缀
          name: utils.assetsPath("img/[name].[hash:7].[ext]")
        }
      },
      ...
    ]
  }

方法二

webpack.base.conf.js里还有一条规则，每一个vue文件都会经过vueLoaderConfig处理

  module: {
    rules: [
      {
        test: /.vue$/,
        loader: "vue-loader",
        options: vueLoaderConfig
      },
      ...
    ]
  }

vueLoaderConfig位于build/vue-loader.conf.js，它又调用了build/utils.js的cssLoaders的方法。

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: "vue-style-loader"
      })
    }

如果是生产环境options.extract值为true，会调用这个ExtractTextPlugin插件做处理，它的作用是抽离项目中引用的样式文件到一个独立的CSS文件中，这样就可以一次加载所有的CSS文件，相当于CSS文件并行加载，可以减少网络请求次数，更多优点及使用可以查看ExtractTextWebpackPlugin。回到这个问题，它还有一个参数就是publicPath，可以覆盖所指定的loader的publicPath配置，那么就跟前面的配置一样，可以给所有的loader统一配置引用文件的路径地址。

另外这里的user:loader实际上是返回一系列的loader的集合，cssLoaders的返回是

  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders("less"),
    sass: generateLoaders("sass", { indentedSyntax: true }),
    scss: generateLoaders("sass"),
    stylus: generateLoaders("stylus"),
    styl: generateLoaders("stylus")
  }

这也就是即便你没有在webpack.base.conf.js中配置sass-loader也能使用SASS语法的原因。

私有云云服务器 Webpack打包分块绑定域名后访问出错 webpack cdn配置为什么 android打包后

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94605.html

webpak最全的简单入门

摘要：了解什么是官方文档是这样介绍的点我了解官方文档简单的来说，可以看做是模块打包机它做的事情是，分析你的项目结构，找到模块以及其它的一些浏览器不能直接运行的拓展语言，等，并将其转换和打包为合适的格式供浏览器使用。了解webpack 什么是webpack 官方文档是这样介绍的：点我了解官方文档简单的来说，WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaSc...

FreeZinG 2019-08-26 10:46 评论0 收藏0
webpack多页应用架构系列（十二）：利用webpack生成HTML普通网页&页面模板

摘要：彻底分离源文件目录和生成文件目录使用生成出来的页面可以很安心地跟打包好的其它资源放到一起，相对于另起一个目录专门存放页面文件来说，整个文件目录结构更加合理如何利用生成页面生成页面主要是通过来实现的，下面来介绍如何实现。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/119000000712...

BaronZhang 2019-08-20 11:34 评论0 收藏0
从基础到实战手摸手带你掌握新版Webpack4.0详解一起读文档

摘要：构建构建就是把源代码转换成发布到线上的可执行代码，包括如下内容。自动刷新监听本地源代码的变化，自动重新构建刷新浏览器。自动发布更新完代码后，自动构建出线上发布代码并传输给发布系统。将文件放入到项目中，在中新建一个放字体图标的文件夹。项目地址 github.com/wudiufo/Web… 知识点概览： Loader，HMR ,Create React App, Caching, Plug...

王军 2019-05-23 17:31 评论0 收藏0
webpack4初学习

webpack基于node，因此想要学习webpack首先要安装node。webpack4要安装node8.2以上版本。 1、安装webpack 为什么选择本地安装，主要是由于以后介绍热更新这一部分不会报错，如果全局安装热更新就会报错，以本部分为基础依次介绍，保证各部分不会出错。 mkdir webpack-test cd webpack-test npm init //初始化npm，都选择默认，...

Object 2019-08-23 14:51 评论0 收藏0
webpack学习笔记

摘要：配置完成后就可以使用来打包代码了。值得注意的是会删除所有无作用代码也就是说那些包裹在这些全局变量下的代码块都会被删除这样就能保证这些代码不会因发布上线而泄露。默认会从项目的根目录下引入这些文件。命令使用 npm install webpack -g 作为全局安装, 在任意目录使用 npm install webpack --save-dev 作为项目依赖安装 np...

mylxsw 2019-08-21 10:36 评论0 收藏0