共计 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 官方文档的指南手册剩余部分，敬请关注。
（待续）
