首先我理解的打包就是項(xiàng)目上線前的準(zhǔn)備，做一些預(yù)處理的工作，就是將各種文件壓縮整合包括一些針對(duì)性質(zhì)的優(yōu)化, 還有將所有的.css 文件和 .js 文件做一個(gè)整合 ，這樣瀏覽器就可以通過少量的HTTP請(qǐng)求獲取想要的前端資源了.
下面就給大家詳細(xì)介紹一下什么是打包 首先我們先了解一下打包工具webpack
一、webpack介紹
1、webpack是什么
簡(jiǎn)單來說它就是一個(gè)前端資源加載/打包工具。它將根據(jù)模塊****的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源。webpack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其他的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Scss，TypeScript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。
詳細(xì)來說： Webpack 是當(dāng)下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進(jìn)行代碼分隔，等到實(shí)際需要的時(shí)候再異步加載。通過 loader 的轉(zhuǎn)換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。
2、webpack的核心作用
模塊化開發(fā)中，我們會(huì)編寫大量模塊，如果不打包就進(jìn)行上線，那么頁(yè)面加載或交互時(shí)，將會(huì)發(fā)起大量的請(qǐng)求。為了性能優(yōu)化，需要使用webpack這樣的打包器對(duì)模塊進(jìn)行打包整合，以減少請(qǐng)求數(shù)。就像簡(jiǎn)單的react項(xiàng)目，所有組件最終將被打包到一個(gè)app.js中。相較于無(wú)差別打包依賴模塊的傳統(tǒng)打包器（Grunt和Gulp等），webpack的核心優(yōu)勢(shì)在于它從入口文件出發(fā)，遞歸構(gòu)建依賴關(guān)系圖。通過這樣的依賴梳理，webpack打包出的bundle不會(huì)包含重復(fù)或未使用的模塊，實(shí)現(xiàn)了按需打包，極大的減少了冗余。
webpack只是一個(gè)前端的打包工具，打包的是靜態(tài)資源，和后臺(tái)沒有關(guān)系，雖然webpack依賴于node環(huán)境。
說到這里又不得不說 npm 是什么了
二、npm介紹
npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平臺(tái)的默認(rèn)包管理工具。通過 npm 可以安裝、共享、分發(fā)代碼,管理項(xiàng)目依賴關(guān)系。
npm 是世界上最大的軟件注冊(cè)表，每星期大約有 30 億次的下載量，包含超過 600000 個(gè) 包（package） （即，代碼模塊）。來自各大洲的開源軟件開發(fā)者使用 npm 互相分享和借鑒。包的結(jié)構(gòu)使您能夠輕松跟蹤依賴項(xiàng)和版本。
npm 由三個(gè)獨(dú)立的部分組成：
- 網(wǎng)站
- 注冊(cè)表（registry）
- 命令行工具 (CLI)
網(wǎng)站是開發(fā)者查找包（package）、設(shè)置參數(shù)以及管理 npm 使用體驗(yàn)的主要途徑。
注冊(cè)表 是一個(gè)巨大的數(shù)據(jù)庫(kù)，保存了每個(gè)包（package）的信息。
CLI 通過命令行或終端運(yùn)行。開發(fā)者通過 CLI 與 npm 打交道。
webpack是npm生態(tài)中的一個(gè)模塊，我們可以通過全局安裝webpack來使用webpack對(duì)項(xiàng)目進(jìn)行打包。
說到這里又不得不說node
三、webpack npm node之間的關(guān)系
webpack的運(yùn)行依賴于node環(huán)境，沒有node是不能打包的，但是webpack打包后的項(xiàng)目本身只是前端靜態(tài)資源，和后臺(tái)沒有關(guān)系，也就是說不依賴于node。
npm產(chǎn)生于node社區(qū)，是node的官方包管理工具，當(dāng)安裝好node的時(shí)候，npm就自動(dòng)安裝好了。
正是因?yàn)閚pm的包管理，是的項(xiàng)目可以模塊化的開發(fā)，而模塊化的開發(fā)帶來的這些改進(jìn)確實(shí)大大的提高了開發(fā)效率，但是利用它們開發(fā)的文件往往需要進(jìn)行額外的處理才能讓 瀏覽器識(shí)別，而手動(dòng)處理又是非常的繁瑣的，這就是webpack工具（打包）存在的意義.
