webpack 入門

標籤：

webpack 入門

什麼是WebPack，為什麼要使用它？為什要使用WebPack

現今的很多網頁其實可以看做是功能豐富的應用，它們擁有著複雜的JavaScript代碼和一大堆依賴包。為了簡化開發的複雜度，前端社區湧現出了很多好的實踐方法

• 模組化，讓我們可以把複雜的程式細化為小的檔案;
• 類似於TypeScript這種在JavaScript基礎上拓展的開發語言：使我們能夠實現目前版本的JavaScript不能直接使用的特性，並且之後還能能裝換為JavaScript檔案使瀏覽器可以識別；
• Scss，less等CSS前置處理器
• ...

這些改進確實大大的提高了我們的開發效率，但是利用它們開發的檔案往往需要進行額外的處理才能讓瀏覽器識別,而手動處理又是非常反鎖的，這就為WebPack類的工具的出現提供了需求。

什麼是Webpack

WebPack可以看做是模組打包機：它做的事情是，分析你的項目結構，找到JavaScript模組以及其它的一些瀏覽器不能直接啟動並執行拓展語言（Scss，TypeScript等），並將其打包為合適的格式以供瀏覽器使用。

WebPack和Grunt以及Gulp相比有什麼特性

其實Webpack和另外兩個並沒有太多的可比性，Gulp/Grunt是一種能夠最佳化前端的開發流程的工具，而WebPack是一種模組化的解決方案，不過Webpack的優點使得Webpack可以替代Gulp/Grunt類的工具。

Grunt和Gulp的工作方式是：在一個設定檔中，指明對某些檔案進行類似編譯，組合，壓縮等任務的具體步驟，這個工具之後可以自動替你完成這些任務。

Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主檔案（如：index.js），Webpack將從這個檔案開始找到你的項目的所有依賴檔案，使用loaders處理它們，最後打包為一個瀏覽器可識別的JavaScript檔案。

如果實在要把二者進行比較，Webpack的處理速度更快更直接，能打包更多不同類型的檔案。

開始使用Webpack

初步瞭解了Webpack工作方式後，我們一步步的開始學習使用Webpack。

安裝

Webpack可以使用npm安裝，建立一個空的練習檔案夾（此處命名為webpack sample progect），在終端中轉到該檔案夾後執行下述指令就可以完成安裝。

//全域安裝npm install -g webpack//安裝到你的項目目錄npm install --save-dev webpack

正式使用Webpack前的準備

1. 在上述練習檔案夾中建立一個package.json檔案，這是一個標準的npm說明檔案，裡面蘊含了豐富的資訊，包括當前項目的相依模組，自訂的指令碼任務等等。在終端中使用npm init命令可以自動建立這個package.json檔案

稿源：勤快學QKXue.NET

擴充閱讀：

webpack 入門

http://qkxue.net/info/33437/webpack

webpack 入門