专栏首页前端修炼之路【第8期】webpack入门学习手记(二)

【第8期】webpack入门学习手记(二)

由于微信不允许外部链接,你需要点击页面尾部左下角的阅读原文,才能访问文中的链接。

最近开始想要维护一个个人的公众号,初心是为了督促自己坚持做笔记,将学习的东西整理记录下来。更进一步的要求是提升动手能力、文章写作能力,和分享经验。终极目标就是为了维护一个个人的品牌形象,像提到@阮一峰、@张鑫旭、@情封、@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元,小额打赏。因为我觉得打赏金额过高,反而会吓到一些朋友。能给我打赏一元,就已经非常开心了。

综上所述,无论遇到的问题有多难,也会义无反顾的坚持下去。

以下是正文。

安装

上一篇【第7期】 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.jsondevDependencies属性下。

接下来,通过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官方文档的指南手册剩余部分,敬请关注。

(待续)

本文分享自微信公众号 - 前端修炼之路(siberiawolf0307),作者:siberiawolf

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-12-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【第7期】 webpack入门学习手记(一)

    之前用过gulp、grunt,但是一直没有学习过webpack。这两天刚好有时间,学习了下webpack。webpack要想深入研究,配置的东西比较多,网上的资...

    siberiawolf
  • 【第9期】webpack入门学习手记(三)

    距离上一次更新这个系列,过去了两天。最近实在是有点忙,没有挤出时间整理。感觉日更还真是困难?

    siberiawolf
  • 【第10期】webpack入门学习手记(四)

    在程序入口文件中,引用这个文件。这个文件的内容,对上一节的代码做了修改。只保留了加载css样式的代码。

    siberiawolf
  • 【第13期】webpack入门学习手记(五)

    前几天朋友聚餐突然想到,再过不到半年时间,第一批20后即将出生。这种感觉就像是,现在的90后看60后~ 一不小心我们这些90后在20后的眼中就变成了上个世纪的人...

    siberiawolf
  • 「Workshop」第二十九期 深度学习入门

    感知机接受多个信号(x1,x2),输出一个信号(y), w1/w2是权重,圆圈就代表神经元

    王诗翔呀
  • 2 年前端面试心路历程(字节跳动、YY、虎牙、BIGO)

    https://juejin.im/post/5e85ec79e51d4547153d073820ed

    闰土大叔
  • 最全前端资源汇总

    一、概要 这份汇总整理,很程度上参考了GitHub最全前端资源汇总;云集前端教程、开发资源、免费书籍、手册规范、求职面试等等,旨在为前端学习 & 技能提升提供方...

    张果
  • 双非同学,自学编程,毕业一年逆袭百度!

    大家好,我是鱼皮,最近秋招快到了,我就想着给大家找一些优秀的程序员面经分享。希望可以帮助准备求职的同学更稳地上岸,同时帮助学编程的小伙伴们更好地明确学习路线和方...

    程序员鱼皮
  • 一位00后前端2年经验的成长历程

    没错,我就是一位00后前端。2001年出生的我,从18年5月份到现在一直在开源中国任职。目前在Gitee私有化部门担任前端开发一职,负责规范制定,技术攻关,人员...

    若川
  • 辛辛苦苦学会的 webpack dll 配置,可能已经过时了

    如果大家看过一些 webpack 优化的文章,一定会出现 dll 动态链接库。它以配置之复杂让众多初学者记忆犹新。

    卤代烃
  • Linux入门学习笔记二

    grep (缩写来自Globally search a Regular Expression and Print)是一种强大的文本搜索工具,它能使用特定模式匹配...

    轩辕小子
  • Webpack 实战入门系列(三):生产配置、样式文件分离及输出清理

    现在vue、react很流行,新项目基本用这些新框架,组件化开发确实是趋势,但是他们再怎么发展也离不开构建工具,顶多在webpack等工具上进行再封装。现在vu...

    一只图雀
  • 微服务[学成在线] day02:CMS前端开发

    由于在学习该项目的过程中发现了原讲义存在的一些问题,所以该笔记基于「学成在线」微服务项目 PDF 讲义进行编写,并且投入了时间去优化了笔记的格式、代码的高亮、重...

    LCyee
  • 前端文章收藏

    前端GoGoGo
  • 性能优化三部曲之一——构建篇

    背景: 接手新项目,发现项目最基本的文件压缩没有,离线包有多余文件,md5也并没有做好, 构建是用coffeescript写的,维护成本及交接成本大,关键的是,...

    李成熙heyli
  • 前端大牛们都学过哪些东西?

    单纯的技术层面也就是上述的那些个东西。如果某个同学都学会了上面的那些东西,是不是就能完全的胜任前端开发工作呢?

    web前端教室
  • Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十一)阶段性小结

    Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十一)阶段性小结 前情回顾 去年写的那一套东西,虽然我也写得非常的认真,...

    FungLeo
  • 18、webpack从0到1-结语

    Ewall
  • React+Redux仿Web追书神器

    引言 由于 10 月份做的 React Native 项目没有使用到 Redux 等库,写了一段时间想深入学习 React,有个想法想做个 demo 练手下,...

    用户1148881

扫码关注云+社区

领取腾讯云代金券