手记

4、webpack从0到1-打包图片资源

上节讲了下webpack的loaders,然后尝试用babel-loader打包了下,想这些基础的loader还有一些需要介绍一下,本章说下关于打包图片资源的loader:file-loaderurl-loader
git仓库:webpack-demo

1、开始

  • 老规矩,复制一份上章的目录改名为chapter4
  • 随着找张图片放到src/assets目录下,并同时新建一个logo.js文件。
 webpack-demo/chapter4
  ...
  |- /src
+   |- /assets
+     |- logo.png
+   |- logo.js
    |- content.js
    |- footer.js
    |- header.js
    |- index.js
  |- index.html
  |- package.json
  |- webpack.config.js
  ...  
  • 然后我们在src/logo.js里面引入这张图片并挂载到页面上。
+ import Logo from "./assets/logo.png";

+ export function createLogo() {
+   const myLogo = new Image();
+   myLogo.src = Logo;
+   document.body.appendChild(myLogo);
+ }
  • src/index.js中:
+ import { createLogo } from "./logo";
import { createHeader } from "./header";
import { createContent } from "./content";
import { createFooter } from "./footer";

+ createLogo();
createHeader();
createContent();
createFooter();

2、file-loader

  • 很明显,你这.png后缀的引入文件webpack压根不认识你,所以我们需要安装相应的loader也就是file-loader来处理这种文件,给webpack赋能
$ npm install file-loader --save-dev
  • 使用,在webpack.config.js中配置它:
// ...
 module: {
    rules: [
      // ...
      {
        // 使用file-loader处理文件
        test: /\.(png|svg|jpg|gif)$/,
        use: ["file-loader"]
      }
    ]
  }
// ...
  • 然后我们使用打包命令就可以看到dist目录下打包生成了一张新的图片了,它是经过file-loader打包压缩的,名字是一个hash值,名字什么的都是可以修改了,后面再讲。打开dist/index.html也能正常显示。
$ npm run build
 webpack-demo/chapter4
  ...
  |- /dist
+   |- 82b9c7a5a3f405032b1db71a25f67021.png
    |- index.html
    |- main.js
  ...  

3、url-loader

  • 其他一些需要补充说明的是,file-loader很强大,像.xml文件啊,.csv、字体文件.ttf等等它都能处理,可是对于处理图片来说,可能我们有更好的选择。
  • 先安装url-loader
$ npm install url-loader --save-dev
  • 修改webpack.config.js文件。
// ...
 module: {
    rules: [
      // ...
-     {
-       // 使用file-loader处理文件
-       test: /\.(png|svg|jpg|gif)$/,
-       use: ["file-loader"]
-     },
+     {
+       // 使用url-loader处理图片资源,当图片size小于limit值时会转为DataURL
+       test: /\.(png|jpg|gif)$/i,
+       use: [
+         {
+           loader: "url-loader",
+           options: {
+             limit: 8192
+           }
+         }
+       ]
+     }
    ]
  }
// ...
  • url-loaderfile-loader的工作能力一样,也可以用来处理图片资源,但是它可以设置一个limit值,这样如果你的图片大小小于这个limit值,那么它就会直接把图片转为一个base64的DataURL,不会打包为一张新的图片了,所以如果你的图片小于你设置的limit值,那么打包后的dist目录下是没有如上文中那样有新的图片生成。

4、小结

  • 大概就是这么些东西,使用webpack并使用不同的loader来处理图片资源,还是比较简单的。
  • 下节谈下处理css、less、sass文件。

参考链接

2人推荐
随时随地看视频
慕课网APP