首页手记 4、webpack从0到1-打包图片资源

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

标签：

Html5 Vue.js webpack

上节讲了下webpack的loaders，然后尝试用babel-loader打包了下，想这些基础的loader还有一些需要介绍一下，本章说下关于打包图片资源的loader：file-loader和url-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-loader跟file-loader的工作能力一样，也可以用来处理图片资源，但是它可以设置一个limit值，这样如果你的图片大小小于这个limit值，那么它就会直接把图片转为一个base64的DataURL，不会打包为一张新的图片了，所以如果你的图片小于你设置的limit值，那么打包后的dist目录下是没有如上文中那样有新的图片生成。