共计 6505 个字符，预计需要花费 17 分钟才能阅读完成。
本人微信公众号：前端修炼之路，欢迎关注。
距离上一次更新这个系列，过去了两天。最近实在是有点忙，没有挤出时间整理。感觉日更还真是困难????
以下是正文。
管理资源
如果看过之前的系列文章，应该会有一个学习项目 webpackStudy，可以从文章下方找到之前的链接。官网给出的示例都是在一个项目中的 html 页面、package.json 和 webpack.config.js 中进行修改。我为了保留每一小节的代码，并没有按照官网给出的方案处理，而是重新新建的配置文件。可以通过腾讯云开发者平台查看源码。
webpack 有两大特色：
动态打包。在 webpack 中，每个模块都会声明所引用的依赖，这样就避免了打包没有使用到的模块。另外通过配置，可以避免重复打包相同的引用，提高打包效率。
强大的 loader。通过 loader，webpack 可以引入任何其他的非 JavaScript 文件。例如，加载 css、图片、字体、JSON、XML 等。
加载 css
首先安装两个 loader：style-loader、css-loader。执行如下命令：
npm install –save-dev style-loader css-loader
注意建议使用淘宝 NPM 镜像
然后在 webpack.config.js 中添加使用 loader 的规则。
webpack.config.js
const path = require(‘path’);
module.exports = {
entry: ‘./src/index.js’,
output: {
filename: ‘bundle.js’,
path: path.resolve(__dirname, ‘dist’)
},
module: {
rules: [{
test: /\.css$/,
use: [‘style-loader’, ‘css-loader’]
}]
}
};
添加 module.rules 表示要使用的 loader 规则。test 属性使用正则表达式匹配任何的.css 文件。use 属性通过一个数组，表示匹配到的文件使用哪些需要加载的 loader，这里就是 style-loader 和 css-loader。
接下来在项目中添加一个 style.css 文件，并修改下 index.js。
project
|- /src
+ |- style.css
|- index.js
|- /node_modules
src/style.css
.hello {
color: red;
}
src/index.js
import _ from ‘lodash’;
import ‘./style.css’;
function component() {
let element = document.createElement(‘div’);
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join([‘Hello’, ‘webpack’], ‘ ‘);
element.classList.add(‘hello’);
return element;
}
document.body.appendChild(component());
在 index.js 文件中，通过 import 将 style.css 文件引入。在 style.css 中添加了一个 hello 样式。index.js 文件中，直接使用了这个 css 样式。
也就是说，在 js 文件中，直接使用了 css 代码。感觉非常酷~
然后执行打包命令，看看有什么变化~
npm run build
此时用浏览器打开 index.html，会发现之前的 Hello webpack 变成了红色。请注意，之前我们并没有在 index.html 中引入任何的 css 样式。用浏览器检查一下页面，就会知道 webpack 是怎么做到的了。
说明 webpack 将 css 代码自动添加到 head 标签中了，非常的智能化~
加载图片
接下来尝试下加载图片和在 css 中引用背景图片。这时我们要使用 file-loader。
npm install –save-dev file-loader
在 webpack.config.js 中添加一段使用 loader 的配置。
webpack.config.js
module: {
rules: [{
test: /\.css$/,
use: [‘style-loader’, ‘css-loader’]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [‘file-loader’]
}]
}
然后在项目中添加一张图片。
project
|- /src
+ |- icon.jpg
|- style.css
|- index.js
|- /node_modules
最后，添加引用图片和使用背景图片代码。
src/index.js
import _ from ‘lodash’;
import ‘./style.css’;
import Icon from ‘./icon.jpg’;
function component() {
let element = document.createElement(‘div’);
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join([‘Hello’, ‘webpack’], ‘ ‘);
element.classList.add(‘hello’);
// Add the image to our existing div.
var myIcon = new Image();
myIcon.src = Icon;
element.appendChild(myIcon);
return element;
}
document.body.appendChild(component());
src/style.css
.hello {
color: red;
background: url(./icon.jpg);
}
重新执行打包命令 npm run build，然后打开 index.html 文件，会发现已经能显示添加的图片和设置的背景图了。
这里还有一个小细节是，如果查看页面会发现，图片名称已经被修改为类似 14a53ef4a1ced4a4a6f7161f51c6870e.jpg 这样的名字了。说明 webpack 处理了添加的图片，并重新命名了。关于更多的图片压缩和优化，以后再继续整理。
加载字体
加载字体与加载图片和 css 没有什么区别。我找了一个 ttf 格式的字体来学习这个过程。首先告诉 webpack 字体文件使用 file-loader 进行加载。
webpack.config.js
module: {
rules: [{
test: /\.css$/,
use: [‘style-loader’, ‘css-loader’]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [‘file-loader’]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [‘file-loader’]
}]
}
然后项目中引入字体：
project
|- /src
+ |- my-font.ttf
|- icon.png
|- style.css
|- index.js
|- /node_modules
最后使用字体。
src/style.css
@font-face{
font-family: ‘myFont’;
src: url(‘./my-font.ttf’) format(‘ttf’);
font-weight: 600;
font-style: normal;
}
.hello {
color: red;
font-family: ‘myFont’;
background: url(./icon.jpg);
}
重新打包 npm run build，打开 index.html 文件，然后查看页面，会发现字体已经使用上了。与图片相同，字体文件也被 wepack 重命名了。
加载数据
webpack 可以加载任何类型的数据，例如 JSON, CSV, TSV, 和 XML。webpack 默认内置了 JSON 加载数据。
照着官网的例子一步步来。
npm install –save-dev csv-loader xml-loader
webpack.config.js
module: {
rules: [{
test: /\.css$/,
use: [‘style-loader’, ‘css-loader’]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [‘file-loader’]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [‘file-loader’]
},
{
test: /\.(csv|tsv)$/,
use: [‘csv-loader’]
},
{
test: /\.xml$/,
use: [‘xml-loader’]
}]
}
添加一个测试用的 xml 数据：
project
|- /src
+ |- data.xml
|- my-font.woff
|- my-font.woff2
|- icon.png
|- style.css
|- index.js
|- /node_modules
data.xml
<?xml version=”1.0″ encoding=”UTF-8″?>
<note>
<to>Mary</to>
<from>John</from>
<heading>Reminder</heading>
<body>Call Cindy on Tuesday</body>
</note>
src/index.js
import _ from ‘lodash’;
import ‘./style.css’;
import Icon from ‘./icon.jpg’;
import Data from ‘./data.xml’;
function component() {
let element = document.createElement(‘div’);
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join([‘Hello’, ‘webpack’], ‘ ‘);
element.classList.add(‘hello’);
// Add the image to our existing div.
var myIcon = new Image();
myIcon.src = Icon;
console.log(Data);
element.appendChild(myIcon);
return element;
}
document.body.appendChild(component());
目前执行到这里一切看起来都很容易。创建一个 data.xml 文件，然后加一些假数据，最后在 index.js 中打印这个数据。但是当我执行打包命令 npm run build 时，一切都不那么的和谐了。出现了如下的错误：
build error
> webpackStudy@1.0.0 build /Users/yyy/Documents/work/workspace/webpackStudy
> webpack –config webpack.config.js
/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.3.1.2@webpack-cli/bin/cli.js:244
throw err;
^
Error: Cannot find module ‘@webassemblyjs/helper-code-frame’
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
at Function.Module._load (internal/modules/cjs/loader.js:529:25)
at Module.require (internal/modules/cjs/loader.js:658:17)
at require (/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.2.0.2@v8-compile-cache/v8-compile-cache.js:159:20)
at Object.<anonymous> (/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.1.7.11@@webassemblyjs/wast-parser/lib/grammar.js:8:24)
at Module._compile (/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.2.0.2@v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:733:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader.js:552:3)
at Module.require (internal/modules/cjs/loader.js:658:17)
at require (/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.2.0.2@v8-compile-cache/v8-compile-cache.js:159:20)
at Object.<anonymous> (/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.1.7.11@@webassemblyjs/wast-parser/lib/index.js:11:38)
at Module._compile (/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.2.0.2@v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:733:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
这就很奇怪了，意思是说找不到一个模块。经过一番苦苦查找，终于知道了原因。
需要将 webpack4 版本 降到 webpack3 版本。我找到的版本是 3.11.0。我将 wepack 卸载掉，然后安装这个版本之后，再次打包，就成功了。
从上图的中的打印数据中可以发现，我们的 xml 文件已经被解析成了 json 格式的数据。
说明：我将本小节代码托管到了腾讯云开发者平台，如果需要查看这节内容，请查找 Asset Management 目录即可。
以上就是指南手册中的 Asset Management 部分。总结一下主要内容：
加载 CSS
加载图片
加载字体
加载数据
下一篇笔记整理 webpack 官方文档的指南手册剩余部分，敬请关注。
（待续）
相关文章
webpack 入门学习手记（一）
webpack 入门学习手记（二）
webpack 入门学习手记（三）
