AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

webpack成长指北第6章---webpack的图片引入

2024-03-08 55
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： webpack成长指北第6章---webpack的图片引入


案例

我们先尝试一下直接引入图片然后打包项目，看看是什么情景

项目目录

代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 解决没有favicon.ico时报错GET http://localhost:9999/favicon.ico 404 (Not Found) -->
  <link rel="shortcut icon" href="#" />
  <title>webpack学习</title>
</head>
<body>
  <div>这是webpack学习</div>
  <div id="root"></div>
  <script src="./dist/main.js"></script>
</body>
</html>

index.js

const starImg = require('./src/assets/star.png');
const dom = document.getElementById('root');
const imgBox = new Image();
imgBox.src = starImg;
dom.append(imgBox);

webpack.config.js

const path = require('path'); // 由于webpack无法直接操作文件夹，所以需要引入node的path模块
module.exports = {
  // entry: './index.js', // 指定当前目录的index.js为打包的入口文件
  entry: {
    main: './index.js', // 指定当前目录的index.js为打包的入口文件
                       // 实际上是 entry: './index.js' 的具体写法，main为打包的Chunk Name
    // sub: './postcss.config.js', // 可以有多个入口文件，指定当前目录的postcss.config.js为打包的入口文件
  },
  mode: 'development', // mode  指定打包模式（development（不会被压缩），production（这个模式的话代码会被压缩））
                       // development默认配置了sourcemap
                       // development默认无tree shaking配置，需要额外配置
  output: {
    // filename: '[name].[contenthash].js', // contenthash，根据content（代码内容）产生的hash值，如果代码不变，contenthash就不会变，否则就会变，主要为了解决浏览器缓存因为名字不变，更新代码后不重新请求更新后文件的问题
    // chunkFilename: '[name].[contenthash].chunk.js', // contenthash，根据content（代码内容）产生的hash值，如果代码不变，contenthash就不会变，否则就会变，主要为了解决浏览器缓存因为名字不变，更新代码后不重新请求更新后文件的问题
    filename: '[name].js', // 打包后输出的打包文件的文件名，根据entry的chunk name作为输出文件名（如果entry有多个入口文件时必须用占位符这样设置output.filename）
    // filename: '[name].[chunkhash].js', // 打包后输出的打包文件的文件名，根据entry的chunk name + chunkhash（解决缓存不更新的问题）作为输出文件名（如果entry有多个入口文件时必须用占位符这样设置output.filename）
    // chunkFilename: '[name].chunk.js', // 入口文件走filename,其他非入口文件是index.js引入（同步引入或者异步引入）的间接js文件（非入口文件），如果打包生成的间接js文件，是走chunkFilename
    path: path.resolve(__dirname, 'dist'), // 指定打包后输出的打包文件在当前webpack.config.js所在文件夹的绝对路径的dist文件夹下
                                           // path值必须是绝对路径 ，所以引入path包，__dirname代表当前webpack.config.js所在文件夹的绝对路径
                                           // 整体路径为第一个参数+第二个参数，即__dirname + dist
                                           // 是所有输出文件的目标路径（物理路径, 存储路径）;                  
    publicPath: '/'   // （url 相对于 HTML 页面所在文件夹的绝对路径 + 值）给output配置全局的publicPath，
                          // 这样各个loader打包出来的文件发布路径（引用地址）就是此全局publicPath + loader的options.outputPath
                          // （文件引用路径就是看这个）
                          // 是对页面引入资源的补充,比如img标签引入或者css引入等.
                          // 千万不能设错，应该观察文件和HTML页面的存储地址位置，进行设置，否则引用时地址会错误，找不到文件
    // publicPath: 'http://www.cdn.cn' // 如果，想把打包后生成的index.html作为入口文件，而打包生成的js放到服务器上如http://www.cdn.cn,那么webpack就应该这样设置
  }
}

package.json

{
  "name": "01_why_use",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "bundle": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

打包

执行npm run bundle

打包结果如下，报错了，提示我们需要通过一个loader来处理star.png图片

loader

在编写前端页面的时候，我们总是时常需要引入一些图片进行展示，那么如何利用webpack将图片打包进我们的项目中呢？

webpack默认是可以处理js文件的，但是它不能直接处理jpg,gif,png图片等静态资源，因此我们需要可以处理jpg,gif,png图片等静态资源的loader

loader就是一个打包方案，对于特定文件，loader可以告诉webpack如何打包这些文件,webpack不识别非js结尾的文件，就需要loader告诉webpack如何打包这些文件（如果需要打包的文件不是以js为后缀，就要考虑使用loader了）

在更高层面，webpack的loader有两个属性

test属性：用于标识出应该被对应的loader进行转换的某个或某些文件

use属性：表示进行转换时，应该使用哪个loader

url-loader

我们可以通过url-loader或者file-loader进行图片的打包处理，这里我们以url-loader为例

安装url-loader

npm i url-loader file-loader -D

配置webpack

webpack.config.js

const path = require('path'); // 由于webpack无法直接操作文件夹，所以需要引入node的path模块
module.exports = {
  // entry: './index.js', // 指定当前目录的index.js为打包的入口文件
  entry: {
    main: './index.js', // 指定当前目录的index.js为打包的入口文件
                       // 实际上是 entry: './index.js' 的具体写法，main为打包的Chunk Name
    // sub: './postcss.config.js', // 可以有多个入口文件，指定当前目录的postcss.config.js为打包的入口文件
  },
  mode: 'development', // mode  指定打包模式（development（不会被压缩），production（这个模式的话代码会被压缩））
                       // development默认配置了sourcemap
                       // development默认无tree shaking配置，需要额外配置
  module: {
    rules: [
      {
        test: /\.(jpg|png|gif)$/, // 对文件类型后缀进行匹配
        use: {
          loader: 'url-loader', // 使用url-loader对图片进行打包,如果url-loader的options没有设置limit,默认将所有静态文件全部打包成base64的字符串放到js里
          options: {
            name: '[name]_[hash].[ext]', // 输出的文件名为[原名称]_[哈希值].[原后缀]
            outputPath: 'images/',       // 文件存储路径（output.path + 值）（物理路径, 存储路径）
                                        // 负责输出目录, 即打包后的写在磁盘的位置
          }
        }
      },
    ]
  },
  output: {
    // filename: '[name].[contenthash].js', // contenthash，根据content（代码内容）产生的hash值，如果代码不变，contenthash就不会变，否则就会变，主要为了解决浏览器缓存因为名字不变，更新代码后不重新请求更新后文件的问题
    // chunkFilename: '[name].[contenthash].chunk.js', // contenthash，根据content（代码内容）产生的hash值，如果代码不变，contenthash就不会变，否则就会变，主要为了解决浏览器缓存因为名字不变，更新代码后不重新请求更新后文件的问题
    filename: '[name].js', // 打包后输出的打包文件的文件名，根据entry的chunk name作为输出文件名（如果entry有多个入口文件时必须用占位符这样设置output.filename）
    // filename: '[name].[chunkhash].js', // 打包后输出的打包文件的文件名，根据entry的chunk name + chunkhash（解决缓存不更新的问题）作为输出文件名（如果entry有多个入口文件时必须用占位符这样设置output.filename）
    // chunkFilename: '[name].chunk.js', // 入口文件走filename,其他非入口文件是index.js引入（同步引入或者异步引入）的间接js文件（非入口文件），如果打包生成的间接js文件，是走chunkFilename
    path: path.resolve(__dirname, 'dist'), // 指定打包后输出的打包文件在当前webpack.config.js所在文件夹的绝对路径的dist文件夹下
                                           // path值必须是绝对路径 ，所以引入path包，__dirname代表当前webpack.config.js所在文件夹的绝对路径
                                           // 整体路径为第一个参数+第二个参数，即__dirname + dist
                                           // 是所有输出文件的目标路径（物理路径, 存储路径）;                  
    publicPath: '/'   // （url 相对于 HTML 页面所在文件夹的绝对路径 + 值）给output配置全局的publicPath，
                          // 这样各个loader打包出来的文件发布路径（引用地址）就是此全局publicPath + loader的options.outputPath
                          // （文件引用路径就是看这个）
                          // 是对页面引入资源的补充,比如img标签引入或者css引入等.
                          // 千万不能设错，应该观察文件和HTML页面的存储地址位置，进行设置，否则引用时地址会错误，找不到文件
    // publicPath: 'http://www.cdn.cn' // 如果，想把打包后生成的index.html作为入口文件，而打包生成的js放到服务器上如http://www.cdn.cn,那么webpack就应该这样设置
  }
}
  • npm run bundle,打包
    发现报错了，资源引用路径变成了[object Module]


    这是因为新版本url-loader 的esModule默认为true，会导致图片的地址变为[object Module],因此这里设置为false（备注：如果是使用file-loader打包图片，也会碰到同样的文件，用同样的解决办法即可）
    修改webpack.config.js
const path = require('path'); // 由于webpack无法直接操作文件夹，所以需要引入node的path模块
module.exports = {
  // entry: './index.js', // 指定当前目录的index.js为打包的入口文件
  entry: {
    main: './index.js', // 指定当前目录的index.js为打包的入口文件
                       // 实际上是 entry: './index.js' 的具体写法，main为打包的Chunk Name
    // sub: './postcss.config.js', // 可以有多个入口文件，指定当前目录的postcss.config.js为打包的入口文件
  },
  mode: 'development', // mode  指定打包模式（development（不会被压缩），production（这个模式的话代码会被压缩））
                       // development默认配置了sourcemap
                       // development默认无tree shaking配置，需要额外配置
  module: {
    rules: [
      {
        test: /\.(jpg|png|gif)$/, // 对文件类型后缀进行匹配
        use: {
          loader: 'url-loader', // 使用url-loader对图片进行打包,如果url-loader的options没有设置limit,默认将所有静态文件全部打包成base64的字符串放到js里
          options: {
            esModule: false, // 新版本中esModule默认为true，会导致图片的地址变为[object Module],因此这里设置为false
            name: '[name]_[hash].[ext]', // 输出的文件名为[原名称]_[哈希值].[原后缀]
            outputPath: 'images/',       // 文件存储路径（output.path + 值）（物理路径, 存储路径）
                                        // 负责输出目录, 即打包后的写在磁盘的位置
          }
        }
      },
    ]
  },
  output: {
    // filename: '[name].[contenthash].js', // contenthash，根据content（代码内容）产生的hash值，如果代码不变，contenthash就不会变，否则就会变，主要为了解决浏览器缓存因为名字不变，更新代码后不重新请求更新后文件的问题
    // chunkFilename: '[name].[contenthash].chunk.js', // contenthash，根据content（代码内容）产生的hash值，如果代码不变，contenthash就不会变，否则就会变，主要为了解决浏览器缓存因为名字不变，更新代码后不重新请求更新后文件的问题
    filename: '[name].js', // 打包后输出的打包文件的文件名，根据entry的chunk name作为输出文件名（如果entry有多个入口文件时必须用占位符这样设置output.filename）
    // filename: '[name].[chunkhash].js', // 打包后输出的打包文件的文件名，根据entry的chunk name + chunkhash（解决缓存不更新的问题）作为输出文件名（如果entry有多个入口文件时必须用占位符这样设置output.filename）
    // chunkFilename: '[name].chunk.js', // 入口文件走filename,其他非入口文件是index.js引入（同步引入或者异步引入）的间接js文件（非入口文件），如果打包生成的间接js文件，是走chunkFilename
    path: path.resolve(__dirname, 'dist'), // 指定打包后输出的打包文件在当前webpack.config.js所在文件夹的绝对路径的dist文件夹下
                                           // path值必须是绝对路径 ，所以引入path包，__dirname代表当前webpack.config.js所在文件夹的绝对路径
                                           // 整体路径为第一个参数+第二个参数，即__dirname + dist
                                           // 是所有输出文件的目标路径（物理路径, 存储路径）;                  
    publicPath: '/'   // （url 相对于 HTML 页面所在文件夹的绝对路径 + 值）给output配置全局的publicPath，
                          // 这样各个loader打包出来的文件发布路径（引用地址）就是此全局publicPath + loader的options.outputPath
                          // （文件引用路径就是看这个）
                          // 是对页面引入资源的补充,比如img标签引入或者css引入等.
                          // 千万不能设错，应该观察文件和HTML页面的存储地址位置，进行设置，否则引用时地址会错误，找不到文件
    // publicPath: 'http://www.cdn.cn' // 如果，想把打包后生成的index.html作为入口文件，而打包生成的js放到服务器上如http://www.cdn.cn,那么webpack就应该这样设置
  }
}

重新npm run bundle打包

图片成功出现

但是发现打包生成的dist没有图片文件，这是怎么回事呢？

看一下打包生成的main.js，原来url-loader将图片转成了base64字符串，放到了main.js里

url-loader的limit

正常情况下，小图片我们为了减少http请求次数，可以将其打包进main.js里，但是如果图片过大，放到main.js反而会影响页面打开的速度，因此我们最好做一个限制，超出限制大小的图片，则将其打包到一个image文件夹里，未超出限制大小，则将图片转成base64打包进main.js里。url-loader恰好有这个功能

webpack.config.js增加url-loader的limit

rules: [
      {
        test: /\.(jpg|png|gif)$/, // 对文件类型后缀进行匹配
        use: {
          loader: 'url-loader', // 使用url-loader对图片进行打包,如果url-loader的options没有设置limit,默认将所有静态文件全部打包成base64的字符串放到js里
          options: {
            esModule: false, // 新版本中esModule默认为true，会导致图片的地址变为[object Module],因此这里设置为false
            name: '[name]_[hash].[ext]', // 输出的文件名为[原名称]_[哈希值].[原后缀]
            outputPath: 'images/',       // 文件存储路径（output.path + 值）（物理路径, 存储路径）
                                        // 负责输出目录, 即打包后的写在磁盘的位置
            limit: 2048                 // 限制当文件小于2KB的时候，就将文件转为base64存储于js中，以减少http请求次数，当文件大于2KB，则打包文件到指定目录，避免js过大
          }
        }
      },
    ]

重新npm run bundle打包，可以看到dist目录生成了images目录和一张图片

但是打开index.html,提示图片路径出错了

上一篇文章webpack成长指北第5章—webpack的基础配置讲过，output.publicPath是对页面引入资源的补充,比如img标签引入或者css引入等，一般来说，如果打包本地资源报404，很有可能就是publicPath没设置正确导致的，我们修改一下webpack的output.publicPath

output: {
    filename: '[name].[contenthash].js', // contenthash，根据content（代码内容）产生的hash值，如果代码不变，contenthash就不会变，否则就会变，主要为了解决浏览器缓存因为名字不变，更新代码后不重新请求更新后文件的问题
    path: path.resolve(__dirname, 'dist'), // 指定打包后输出的打包文件在当前webpack.config.js所在文件夹的绝对路径的dist文件夹下
                                           // path值必须是绝对路径 ，所以引入path包，__dirname代表当前webpack.config.js所在文件夹的绝对路径
                                           // 整体路径为第一个参数+第二个参数，即__dirname + dist
                                           // 是所有输出文件的目标路径（物理路径, 存储路径）;                  
    publicPath: './dist/'   // （url 相对于 HTML 页面所在文件夹的绝对路径 + 值）给output配置全局的publicPath，
                          // 这样各个loader打包出来的文件发布路径（引用地址）就是此全局publicPath + loader的options.outputPath
                          // （文件引用路径就是看这个）
                          // 是对页面引入资源的补充,比如img标签引入或者css引入等.
                          // 千万不能设错，应该观察文件和HTML页面的存储地址位置，进行设置，否则引用时地址会错误，找不到文件
  }

再次打包，运行成功，图片成功展示

如有问题，欢迎探讨，谢谢。

文章标签：
CDN
JavaScript
前端开发
关键词：
Webpack图片
相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
Boale_H
目录
相关文章
昆吾kw
|
JSON 前端开发 JavaScript
Webpack5新特性：使用 Assets Module 处理图片和字体资源
本文介绍了 Webpack5 的 Assets Module ，是其内置的用来处理图片字体文件等资源模块的新功能。相比与过去通过 loader 的方式去处理，更加方便和简洁。
昆吾kw
1321 0
dufadayang
|
23天前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader，可以实现对这些资源的精细处理和优化，提升项目的性能和用户体验。在实际应用中，需要不断探索和实践，根据项目的具体情况进行灵活调整和优化，以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握，你将能够更好地应对各种复杂的资源处理需求，为项目的成功构建和运行提供坚实的基础。
dufadayang
47 1
你真的不认识我了
|
2月前
|
前端开发
umi webpack配置图片资源转base64
umi webpack配置图片资源转base64
你真的不认识我了
35 6
天界程序员
|
前端开发 JavaScript
第三章 webpack5处理图片资源
介绍如何处理图片资源
天界程序员
370 0
coderHing[专注前端]
|
JavaScript 前端开发
[Node] Node.js Webpack打包图片-Js-Vue
[Node] Node.js Webpack打包图片-Js-Vue
coderHing[专注前端]
93 0
凯小默
webpack基础篇（七）：资源解析--解析图片
webpack基础篇（七）：资源解析--解析图片
凯小默
115 0
webpack基础篇（七）：资源解析--解析图片
前端歌谣
|
前端开发
前端学习案例5-webpack中使用url-loader打包图片
前端学习案例5-webpack中使用url-loader打包图片
前端歌谣
74 0
前端学习案例5-webpack中使用url-loader打包图片
@小朱呀路
webpack打包图片资源，图片不显示和index.html，HtmlWebpackPlugin
webpack打包图片资源，图片不显示和index.html，HtmlWebpackPlugin
@小朱呀路
296 0
webpack打包图片资源，图片不显示和index.html，HtmlWebpackPlugin
游客su5fusaa4apsy
|
前端开发
webpack4--图片，字体处理
webpack4--图片，字体处理
游客su5fusaa4apsy
94 0
webpack4--图片，字体处理
行者武松
|
CDN 应用服务中间件
webpack结合reactjs、vuejs项目中图片处理
行者武松
2118 0

热门文章

最新文章

  • 1
    Webpack构建library时的踩坑经历
  • 2
    【vue】webpack打包vue项目并且运行在Tomcat里面
  • 3
    webpack window 使用sass来编译css样式
  • 4
    vue之webpack打包原理和用法详解
  • 5
    2.2.3 使用webpack loader
  • 6
    wp2vite的妙用，让webpack项目支持vite
  • 7
    你真的理解 Webpack？请回答下列问题
  • 8
    UniApp 解决 Error: Cannot find module ‘webpack/lib/RuleSet‘
  • 9
    webpack指南-webpack介绍-代码分割 - CSS
  • 10
    2.2.4 webpack 配置文件
  • 1
    webpack如何设置devServer启动项目为https协议
    1206
  • 2
    webpack成长指北第9章---webpack如何对icon字体进行打包
    124
  • 3
    webpack成长指北第8章---webpack的CSS Modules打包
    65
  • 4
    webpack成长指北第7章---webpack的css\less\scss样式打包
    96
  • 5
    webpack成长指北第3章---常用webpack命令及使用webpack命令的方式
    61
  • 6
    webpack成长指北第2章---安装webpack的正确姿势
    54
  • 7
    深入理解前端性能优化中的Webpack Tree Shaking
    76
  • 8
    Webpack 进阶：深入理解其工作原理与优化策略
    166
  • 9
    前端性能瓶颈崩溃项目？Webpack助力解决！
    88
  • 10
    模块化时代的必备工具：Webpack详解，为你的项目注入新活力
    43

    • 相关课程

    更多
  • 前端自动化构建工具 Webpack
  • Java Web开发-Web应用、Tomcat、HTTP请求与响应
  • Python Web 框架 Django 快速入门
  • 前端开发框架Bootstrap使用教程
  • Python Web 框架 Flask 快速入门
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器

    • 相关电子书

    更多
  • 基于webpack和npm的前端组件化实践
  • 从Web到Cloud App——YunOS Web App 开发经验分享
  • 面向Web应用的三维建模实战

    • 相关实验场景

    更多
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 前端开发基础6：Node.js和LESS预编译工具
  • WEB网页编程实战
  • Web Terminal环境使用指南
    • 下一篇
    无影云桌面