上节讲了下 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 目录下是没有如上文中那样有新的图片生成.
image
4, 小结
大概就是这么些东西, 使用 webpack 并使用不同的 loader 来处理图片资源, 还是比较简单的.
下节谈下处理 CSS,Less,Sass 文件.
参考链接
webpack 官网
webpack 从 0 到 1 系列文章
来源: http://www.jianshu.com/p/cd31c9d8990c