webpack入门学习手记（二）

时间  2019-11-08
标签 webpack 入门 学习 手记 繁體版
原文   原文链接

图片描述

本人微信公众号：前端修炼之路，欢迎关注。

最近开始想要维护一个我的的公众号，初心是为了督促本身坚持作笔记，将学习的东西整理记录下来。更进一步的要求是提高动手能力、文章写做能力，和分享经验。终极目标就是为了维护一个我的的品牌形象，像提到@阮一峰、@张鑫旭、@情封、@justjavac 等等业内知名的IT技术人员同样，而后用本身的品牌形象获取一些合法的经济利益，用来改善生活。毕竟努力学习、认真工做，说到底仍是为了更好的生活。html

鉴于以上种种缘由和目的，我开通了微信公众号，并将文章更新到SegmentFault、掘金，进一步扩大传播度。目前原创文章已经写了7期。在这个过程当中主要有如下几点体会：前端

一、没法坚持原创日更的囧境。java

由于个人写做动机是本身的学习笔记、工做笔记的整理。也就是说，我要有不断学习和工做的过程，而后将这个过程遇到的问题和解决方法记录整理下来。这就须要强制性的养成一些习惯，而且压缩掉一些本身之前花时间作的事情。目前这几件事情作到。可是我没法处理掉临时性突发的事件，尤为是处理起来比较费时间的事情。一旦将事情解决完毕，本身已经筋疲力尽，无意无力再坚持日更了。node

目前想到的解决思路是，首先依然是要坚持原创日更文章，内容集中在学习笔记、工做笔记和一些反思等。而后一旦有临时性突发事件耗费本身大量时间和经历的状况发生，致使可能次日没法更新文章，能够选择转载一些优秀的文章。webpack

目前取得了一位公众号做者@苏南 的转载权限。但愿之后能得到更多的做者转载权限。git

二、没有文章可写的囧境。web

以前的几篇文章主要是本身遇到的一些问题，文章的连续性并不强。若是是想保证能日更，那就必须有新的问题出现，而且是值得用来写文章的。并非说随便的一个问题，例如标点符号错误，语法语句错误，就能拿过来写一篇文章的。再有就是字数也不能太少，不然直接在SF上发一个笔记就行了。另外估计只有20、30的文章，是小学生写的做文吧~ 没有什么阅读的价值。npm

因此我想到的解决思路是，作一个系列。例如如今的《webpack入门学习手记》系列。首先是我在学习webpack，而后就是webpack的各方面知识点足够我更新一段时间，最后就是文章内容足够多，也足够丰富。因此这个系列就诞生了。json

当这个系列更新完毕以后，也不用慌，还有ES六、Vue等等系列均可以写。另外就是一些非系列的性的文章，能够穿插到日更里面。这样公众号的内容，也就丰富起来，也不会担忧没有文章、没有原创文章了。segmentfault

三、收到粉丝留言和打赏的喜悦。

个人更新思路是，文章是先写到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官方文档的指南手册剩余部分，敬请关注。

（待续）

相关文章

webpack入门学习手记（一）

webpack入门学习手记（二）

webpack入门学习手记（三）

webpack入门学习手记（四）

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程