webpack入门学习手记(二)

39次阅读

共计 6855 个字符,预计需要花费 18 分钟才能阅读完成。

本人微信公众号:前端修炼之路,欢迎关注。
最近开始想要维护一个个人的公众号,初心是为了督促自己坚持做笔记,将学习的东西整理记录下来。更进一步的要求是提升动手能力、文章写作能力,和分享经验。终极目标就是为了维护一个个人的品牌形象,像提到 @阮一峰、@张鑫旭、@情封、@justjavac 等等业内知名的 IT 技术人员一样,然后用自己的品牌形象获取一些合法的经济利益,用来改善生活。毕竟努力学习、认真工作,说到底还是为了更好的生活。
鉴于以上种种原因和目的,我开通了微信公众号,并将文章更新到 SegmentFault、掘金,进一步扩大传播度。目前原创文章已经写了 7 期。在这个过程中主要有以下几点体会:
1、无法坚持原创日更的囧境。
因为我的写作动机是自己的学习笔记、工作笔记的整理。也就是说,我要有不断学习和工作的过程,然后将这个过程遇到的问题和解决方法记录整理下来。这就需要强制性的养成一些习惯,并且压缩掉一些自己以前花时间做的事情。目前这几件事情做到。但是我无法处理掉临时性突发的事件,尤其是处理起来比较费时间的事情。一旦将事情解决完毕,自己已经筋疲力尽,无心无力再坚持日更了。
目前想到的解决思路是,首先依然是要坚持原创日更文章,内容集中在学习笔记、工作笔记和一些反思等。然后一旦有临时性突发事件耗费自己大量时间和经历的情况发生,导致可能第二天无法更新文章,可以选择转载一些优秀的文章。
目前取得了一位公众号作者 @苏南 的转载权限。希望以后能获得更多的作者转载权限。
2、没有文章可写的囧境。
之前的几篇文章主要是自己遇到的一些问题,文章的连续性并不强。如果是想保证能日更,那就必须有新的问题出现,并且是值得用来写文章的。并不是说随便的一个问题,例如标点符号错误,语法语句错误,就能拿过来写一篇文章的。再有就是字数也不能太少,否则直接在 SF 上发一个笔记就好了。另外估计只有 20、30 的文章,是小学生写的作文吧~ 没有什么阅读的价值。
所以我想到的解决思路是,做一个系列。例如现在的《webpack 入门学习手记》系列。首先是我在学习 webpack,然后就是 webpack 的各方面知识点足够我更新一段时间,最后就是文章内容足够多,也足够丰富。所以这个系列就诞生了。
当这个系列更新完毕之后,也不用慌,还有 ES6、Vue 等等系列都可以写。另外就是一些非系列的性的文章,可以穿插到日更里面。这样公众号的内容,也就丰富起来,也不会担心没有文章、没有原创文章了。
3、收到粉丝留言和打赏的喜悦。
我的更新思路是,文章是先写到 SF 平台,利用 Markdown 快速写好文章,然后更新到掘金,最后更新到微信公众平台,等到第二天定时群发消息。
这个过程中,我 SF 的声望已经突破了 1.5K,掘金和 SF 的粉丝关注度也在不断增加。每次看到又有新的粉丝和点赞收藏,就有继续写下去动力。因为掘金和 SF 不同于微信,都是互相未曾谋面之人,仅仅是因为文章的好坏而关注和收藏的。
相比于 SF 和掘金,公众号的粉丝大部分是我的亲朋好友。他们被我强制性的要求关注我的公众号。其实他们中有很多人,根本就不知道我写的是什么,但是依然关注了公众号。非常感谢他们的支持~
相比于粉丝数的增长,最开心的还是收到了真金白银的打赏。只不过目前打赏一直没有进到我的账户,不知道微信是怎么弄的。其实这几期里面,给我打赏最多就是我爸妈了,我每写的一篇文章他们都会下方默默的打赏我 1 元钱~ 可怜天下父母心啊~
不同于别的公众号打赏,我设置的金额是 1 元、2 元、5 元,小额打赏。因为我觉得打赏金额过高,反而会吓到一些朋友。能给我打赏一元,就已经非常开心了。
综上所述,无论遇到的问题有多难,也会义无反顾的坚持下去。
以下是正文。
安装
上一篇 webpack 入门学习手记(一),主要是介绍了 webpack 的核心概念,是整个学习过程的基础知识。接下来按照官方文档给出的指南手册依次进行。另外我会根据个人理解和操作过程,对文档内容有一些修改,如有出入请参考原文。
要想使用 webpack,前提是必须安装 Node.js,另外请保证使用最新的稳定版本。否则 Node 的版本过低,会导致意想不到的问题出现。
官方手册中给出了两种安装方式,一种是本地安装(Local Installation)和全局安装(Global Installation)。在黄色的警告框处,明显提示说,不建议全局安装,因为会将 webpack 锁定到指定的版本,另外也会在不同的 webpack 版本的项目中,构建失败。所以我们直接使用本地安装即可。
首先安装最新版本的 webpack:
npm install –save-dev webpack
因为使用的 webpack v4 以上的版本,所以再安装 cli 工具:
npm install –save-dev webpack-cli

注意:其实我在安装的时候,使用的不是 npm 命令,而是 cnpm。因为众所周知的原因,国内下载安装会比较慢甚至卡顿,所以使用了淘宝镜像,可以自行百度下具体说明~ 以下文章中提到的所有 npm 命令地方,都请改成 cnpm。

使用本地安装的好处是,当升级项目时会比较方便。如果正确执行了上面的两个命令,会在本地目录多出一个 node_modules 目录和一个 package.json 文件。打开 package.json 文件,内容如下:
package.json
{
“devDependencies”: {
“webpack”: “^4.27.1”,
“webpack-cli”: “^3.1.2”
}
}
这就是我们刚才安装依赖。此时的 package.json 只有 3 行的代码,如果是第一次接触 webpack 并且是第一次接触 node 的朋友,会被手册中接下来的代码产生疑问。因为接下来手册添加了一段 scripts 代码。我们在项目中,添加这段代码之前,先来执行下面这个命令:
npm init
这个命令会初始化一个新的 package.json,因为我们在安装 webpack 时生成了一个 package.json,所以接下来的内容会直接追加到文件中。
执行 npm init 这个命令之后,会向你提问一系列问题,如果觉得默认信息没有问题的话,直接回车就行。新生成的 package.json 类似如下:
package.json
{
“devDependencies”: {
“webpack”: “^4.27.1”,
“webpack-cli”: “^3.1.2”
},
“name”: “webpackstudy”,
“description”: “webpack 入门学习手记 ”,
“version”: “1.0.0”,
“main”: “index.js”,
“dependencies”: {
“ajv-errors”: “^1.0.1”,

},
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“repository”: {
“type”: “git”,
“url”: “git@git.dev.tencent.com:siberiawolf0307/webpackStudy.git”
},
“author”: “siberiawolf”,
“license”: “MIT”
}

因为生成的 dependencies 内容过多,我直接省略掉了。此时就能找到指南手册中的 scripts 了。我们在默认的 test 后面添加上官网中的代码即可。如下:
package.json
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″,
“start”: “webpack –config webpack.config.js”
}

补充:在使用默认 package.json 是,会让用户填写 license。因为对开源协议比较陌生,我特意去查了一下使用何种开源协议。经过对比,我发现使用 MIT 协议是比较适合我的。MIT 协议是比较宽松的协议。此协议允许别人以任何方式使用你的代码同时署名原作者,但原作者不承担代码使用后的风险,当然也没有技术支持的义务。jQuery 和 Rails 就是 MIT 协议。

上面的添加 scripts.start,其实是运行 webpack, 并且运行的配置文件是 webpack.config.js。因为手册进行到这里,并没有添加任何的 js 文件,所以先不要执行这个命令~ 我们后面再来学习。

说明:我将本小节代码托管到了腾讯云开发者平台,如果需要查看这节内容,请查找 Installation 目录即可。

开始
如果你真的动手操作了一遍安装步骤,并且是初学者,那么请先删除掉你文件夹下的 package.json 文件。因为接下来按照手册给出的示例,我们是在一个全新的目录下进行操作的,请注意这一点。
因为我们在执行安装小节是,肯定已经在一个工作目录下,例如我的工作目录是 webpackStudy,所以文档中创建新目录 mkdir webpack-demo && cd webpack-demo 省略掉。下面的代码示例都是在这个工作目录下。
因为已经删除掉了 package.json 文件,接下来我们新生成一个:
npm init -y
npm install webpack webpack-cli –save-dev
npm init -y,多了一个参数 -y,就是说不用再询问我们填写参数了,直接使用了默认值。另外因为在本工作目录下已经安装过 webpack 了,此时执行的速度会非常快。
接下来,我们创建相应的 html、js 文件。
project
webpackStudy
|- package.json
+ |- index.html
+ |- /src
+ |- index.js

src/index.js
function component() {
let element = document.createElement(‘div’);

// Lodash, currently included via a script, is required for this line to work
// 这段英文注释的意思是说,在 index.html 文件中已经引入了 Lodash 这个 script 标签了,所以能正常使用
element.innerHTML = _.join([‘Hello’, ‘webpack’], ‘ ‘);

return element;
}

document.body.appendChild(component());
index.html
<!doctype html>
<html>
<head>
<title>Getting Started</title>
<script src=”https://unpkg.com/lodash@4.16.6″></script>
</head>
<body>
<script src=”./src/index.js”></script>
</body>
</html>
在工作目录下创建 index.html 文件,并创建 src 目录,然后创建 index.js 文件。文件的组织形式如上。然后复制粘贴 html 和 js 代码。
接下来我们修改一下 package.json 文件,删掉 main 入口,并设置 private,防止意外发布代码。
package.json
{
“description”: “”,
+ “private”: true,
– “main”: “index.js”
}
需要注意的是,在 html 页面中,我们引入了 Lodash 这个 js 文件。Lodash 是一个 JS 实用工具库,非常适合于遍历数组、字符串和对象等。
在 index.js 文件中,并没有显示的声明需要引入 Lodash。这样就会造成以下几个问题:

没有显示声明,index.js 中的代码依赖于外部的扩展库。
如果依赖不存在,或者引入错误,应用程序无法正常执行。例如没有引用 Lodash。
如果依赖文件被引入了,但是没有使用,浏览器就会下载无用代码。

如果我们使用 webpack 来管理 JS 呢?看看情况如何~
创建一个打包文件
首先调整一下我们的工作目录。创建一个 dist 目录,用来存放压缩和优化之后的代码。而我们之前创建的 src 目录,用来存放原始代码。将之前创建的 index.html 文件移动到 dist 目录下。最终文件结构如下:
project
webpackStudy
|- package.json
+ |- /dist
+ |- index.html
– |- index.html
|- /src
|- index.js
因为我们要在 index.js 中显示声明 Lodash,所以需要先在项目目录下安装好,执行命令:
npm install –save-dev lodash
注意这里,我使用的是 –save-dev 参数。这样会将 Lodash 添加到 package.json 的 devDependencies 属性下。
接下来,通过 import 命令,显示引用 Lodash。
src/index.js
+ import _ from ‘lodash’;
+
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’], ‘ ‘);

return element;
}

document.body.appendChild(component())
然后需要更新下 index.html 文件,因为我们修改了依赖 js 的方式。
dist/index.html
<!doctype html>
<html>
<head>
<title>Getting Started</title>
– <script src=”https://unpkg.com/lodash@4.16.6″></script>
</head>
<body>
– <script src=”./src/index.js”></script>
+ <script src=”main.js”></script>
</body>
</html>
最后,我们执行下面的命令:
npx webpack
然后打开 index.html 文件,就会看到 Hello webpack。
因为我们在执行 npx webpack 时,没有使用执行的配置文件,所以使用默认值,也就是会在 dist 目录下生成 main.js。而这个打包之后的文件,就在 index.html 引入。
如果打开 main.js,会发现 Lodash 已经在这个文件中了。webpack 已经帮我们添加好了。
指定配置文件
在 webpack4 中,不用指定配置文件。但是这样可扩展性就差了。所以我们创建一个 webpack.config.js 文件。
在工作目录下创建 webpack.config.js 文件。内容如下:
webpack.config.js
const path = require(‘path’);

module.exports = {
entry: ‘./src/index.js’,
output: {
filename: ‘main.js’,
path: path.resolve(__dirname, ‘dist’)
}
};
然后执行如下命令:
npx webpack –config webpack.config.js
执行完之后结果跟之前一样~
其实也可以不指定 –config webpack.config.js 这个参数。如果添加了 webpack.config.js 文件,webpack 会自动使用这个配置文件。
但是假如文件的名字不是 webpack.config.js 时,就需要用到 –config 这个参数了。尤其是当配置文件被拆分成多个文件时,会非常有用。
之前我们直接在命令行中运行的方式叫做 CLI,现在通过配置文件,具备更高的灵活性。可以指定 loader、plugins 等。
NPM 脚本
还记得在开始小节中,我们添加的 scripts.start 吗?现在我们同样的在 package.json 中添加一段脚本,这样我们每次运行程序是,只需要简单调用脚本即可。
package.json
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″,
“build”: “webpack –config webpack.config.js”
}
然后在命令行执行如下命令:
npm run build
npm run build 这段命令,就是制定 package.json 中的 scripts 脚本,其中 build 就是我们刚才定义的内容。

说明:我将本小节代码托管到了腾讯云开发者平台,如果需要查看这节内容,请查找 Getting Started 目录即可。

以上就是指南手册中的 Getting Started 部分。总结一下主要内容:

安装 webpack 和依赖的 js 工具库 Lodash
通过默认配置和指定配置文件,分别打包文件
使用 NPM 脚本运行 webpack

下一篇笔记整理 webpack 官方文档的指南手册剩余部分,敬请关注。
(待续)

正文完
 0