这一章节的代码位于 05_file_package

  • html使用图片标签
  • 在js中创建图片对象来引入
  • 在css中引入

先在src文件夹下放一张图片

file-loader

file-loader会默认在内部生成一张图片, 并将js中使用的图片路径转化为对应的哈希路径返回回来
文档: https://webpack.js.org/loaders/file-loader/#root

  • 安装 yarn add file-loader -D
  • 在 index.js 中使用图片

  • image.png

  • 在webpack 中配置

  • image.png
  • 运行 npm run dev 打开浏览器即可看到图片生成在页面里
  • image.png

css中引入图片

css中引入图片已经在css-loader中处理好, 直接使用即可
image.png

html中引入图片 html-withimg-loader

由于直接在html中使用图片标签, 由于没有依赖, 图片不会被打包, 于是需要 html-withimg-loader 处理
文档: https://www.npmjs.com/package/html-withimg-loader

  • 安装 yarn add html-withimg-loader -D
  • webpack中配置

  • image.png

  • 在模版 index.html 中引入图片

  • image.png
  • 在开发环境中查看, 并打包出来查看结果
  • image.png
  • image.png

小图片采用base64, url-loader

小图片时, 没必要对图片单独打包, 可以转成base64格式直接在代码中显示, 可以使用url-loader实现这个功能
文档: https://www.npmjs.com/package/url-loader

  • 安装 yarn add url-loader -D
  • webpack中配置
  • image.png
  • 将file-loader配置替换成url-loader, 并设置大小限制, 这里是200k的图片, 设置为1则不转base64
  • 当图片小于200k时, 会被转成base64, 否则会默认使用file-loader继续提取图片
  • 打包代码查看结果
  • image.png

image.png

  • 既有base64图片也有单独提取出来的图片