這些天在項目之余的時間學習了webpack打包項目的東西，非常榮幸的找到一些大神的文章來學習，死勁嚼了幾天，終於略知一二。在以後的工作上還需繼續學習，下面我將分享我這幾天學到的一點東西，希望能讓我一個還不算入門webpack的小白領大家入門。本文主要還是摘抄大神的文章加上自己手動的一些過程記錄，不喜勿噴，謝謝！開車了！！！開車了！！！

　　一、什麽是Webpack

　　webpack 是一個現代 JavaScript 應用程序的模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然後將所有這些模塊打包成少量的 bundle

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

　　二、webpack的使用

　　1、項目初始化

　　webpack安裝完成後，我們緊接著輸入命令來初始化項目，初始化命令：npm init; 在初始化的過程中，終端會問你一系列諸如項目名稱，項目描述，作者等信息，不過不用擔心，如果你不準備在npm中發布你的模塊，這些問題的答案都不重要，回車默認即可。

　　這時候，目錄中會生成一個package.json文件，這是一個標準的npm說明文件，裏面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等等。

　　2、安裝webpack

　　新建一個項目目錄，打開終端進入新建的目錄輸入命令安裝webpack：

　　全局安裝：npm inatsll webpack -g; 　　　　跟隨目錄安裝：npm inatsll --save-dev webpack;

　　3、項目構建

　　在根目錄新建app和public兩個目錄與及一個配置文件webpack.config.js，app文件夾用來存放原始數據和我們將寫的JavaScript模塊，public文件夾用來存放之後供瀏覽器讀取的文件（包括使用webpack打包生成的js文件以及一個index.html

　　目錄結構如圖所示：

　　下面我們看看每個文件的代碼，與及運行的一些過程結果：

　　index.html文件：

　　main.js 文件：

　　project.js文件：

　　webpack.config.js文件：這裏的配置是指定main.js文件是我們唯一的入口文件，而bundle.js文件是我們打包後輸出的文件名，與及我們打包後存放的路徑。

　　置於entry和output這寫webpack的屬性詞代表什麽，我在這裏就不做解釋了，可以去webpack中文文檔學習，鏈接：https://doc.webpack-china.org/concepts/　　

　　package.json文件：

　　各文件配置好後，我們在命令行輸入：npm start, 這是項目就開始打包文件了：

　　我們可以看到webpack把我們的main.js文件和project.js文件進行了編譯,編譯完成後我們可以發現在public目錄下自動生成了一個編譯後的bubundle.js文件。然後我們就可以在瀏覽器打開我們的index.html文件了，並且能正常打開。如圖所示：

　　恭喜你，現在你已經學會了webpack最基礎的打包方式。

　　三、稍微的進階一下

　　1、使用webpack構建本地服務

　　構建本地服務之後，瀏覽器會監聽你代碼的修改，並且自動刷新更改的結果。接下來我們就安裝這個依賴包，

　　服務依賴包：npm install --save-dev webpack-dev-server, devserver作為webpack配置選項中的一項，以下是它的一些配置選項，更多配置可參考

　　把這些命令加到webpack的配置文件中，現在的配置文件webpack.config.js如下所示

　　註意了哈，package.json這裏配置有個小細節，就是我們平時run代碼的時候大多數是輸入：npm run dev, 那是因為在package.json裏面配置了如圖所示：

　　如果用默認的server來配置的話，run項目時直接輸入：run server， 即可。另外，當我們的port屬性不設置時，默認的端口號是：8080，但是上面我們改為8088了，如圖所示：

　　2、Loaders的安裝和配置　　

　　Loaders是webpack提供的最激動人心的功能之一了。通過使用不同的loader，webpack有能力調用外部的腳本或工具，實現對不同格式的文件的處理，比如說分析轉換scss為css，或者把下一代的JS文件（ES6，ES7)轉換為現代瀏覽器兼容的JS文件。

　　Loaders需要單獨安裝並且需要在webpack.config.js中的modules關鍵字下進行配置，Loaders的配置包括以下幾方面：

• test：一個用以匹配loaders所處理文件的拓展名的正則表達式（必須）
• loader：loader的名稱（必須）
• include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選）；
• query：為loaders提供額外的設置選項（可選）

　　3、babel的配置

　　Babel其實是一個編譯JavaScript的平臺，它的強大之處表現在可以通過編譯幫你達到以下目的：

• 使用下一代的JavaScript代碼（ES6，ES7...），即使這些標準目前並未被當前的瀏覽器完全的支持；
• 使用基於JavaScript進行了拓展的語言;

　　Babel的安裝與配置

　　Babel其實是幾個模塊化的包，其核心功能位於稱為babel-core的npm包中，webpack可以把其不同的包整合在一起使用，對於每一個你需要的功能或拓展，你都需要安裝單獨的包（用得最多的是解析Es6的babel-preset-es2015包）。

　　安裝babel依賴：npm install --save-dev babel-core babel-loader babel-preset-es2015 （這裏是連續安裝了好幾個依賴包），下面我們進行配置，代碼如圖所示

0基礎手把手教你搭建webpack運行打包項目（未完待續）