Day29：【技术篇】初探打包工具的存在？

一、前言

先前有写过两篇关於 Webpack 的文章(文章1、文章2)，回顾起自己学习到 Webpack 是在培训营课程尾声时期，那时候还蒙蒙懂懂的，只知道很基本的用法，但不清楚实际深入运作原理，所以写了前述两篇。

但大家有想过为何会有像是 Webpack 之类的打包工具诞生吗？他的存在有什麽必要性呢？

自从 Node.js 发行後，套件管理工具 npm 诞生，即是工程化的起点。npm 提供了 script 的功能，可以将 shell script 封装起来供其他开发者使用。

{
    "script":{
        "dev": "node app.js",
        "mock": "node index.js"
    }
}

以上面这段程序码来解说，当开发者输入npm run dev，就会执行node app.js这行指令；相对地当开发者输入npm run mock，就会执行node index.js这行指令。这样简短的 script 设定，可以解决一些基本需求。

但後续开发过程，大部分重复繁杂的步骤，就需要工具为我们带来工程化的方式，加速开发的流程。

除了较常听见的 Webpack，其实还有以下几种打包工具可供选择：

在使用前端框架编写程序时，因为一般的浏览器只能听解读基础的 HTML、CSS、JavaScript，中间必须经过转换的步骤，就称为转译。

开发者撰写出的程序码，会透过打包工具力呼叫 Bable 套件，逐步将之转译成浏览器能解读的内容，

开发者可随着程序码开发需求，设定相对应的 Webpack 插件(如：minify、uglify、chunk等)，就能套用各个插件带来的优化功能至应用程序上。

打包工具的套件真的很多样且实用，以下简列几种举例：

项次	套件名称	用途
1	Webpack Spritesmith	可完成图档合并
2	Webpack 内建的 Hot Reload	可侦测并仅更新新修改到的内容

今日文章其实只是稍微提到打包工具之缘起与主要用途，文章内容是自己於下班时间研究书籍与网路资源整理出来，若有错误或不详尽之处，再请各位前辈指导。

如果想知道的更深入，推荐可以看「从0到Webpack」的「写在 Webpack 之前」这个章节，其他前端更深入常听到的专有名词也可以看「前端三十」这本，相信会获益不少！

本文同步发布於我的个人网站 Annie Code Life