webpack入门学习手记（三）

本人微信公众号：前端修炼之路，欢迎关注。距离上一次更新这个系列，过去了两天。最近实在是有点忙，没有挤出时间整理。感觉日更还真是困难????以下是正文。管理资源如果看过之前的系列文章，应该会有一个学习项目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.jsconst 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_modulessrc/style.css.hello { color: red;}src/index.jsimport _ 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.jsmodule: { 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.jsimport _ 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.jsmodule: { 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-loaderwebpack.config.jsmodule: { 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_modulesdata.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.jsimport _ 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入门学习手记（三）