webpack入门学习手记(三)

36次阅读

共计 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 入门学习手记(三)

正文完
 0