webpack第一次出現在我的視線，是在一次面試中，當時面試官問我是否了解AMD、CMD、Gulp、webpack ，我當時就懵了，因為在此之前沒聽說過這些，以前做的只是單純的網頁制作，相對比較簡單，當時因為急找工作，也沒怎么關注，最近項目需要用到webpack，所以就仔細查了看了官方文檔和相關資料，并記錄下來以便日后可以查閱。
中文地址 外文地址
什么是webpack?
Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源。
什么是靜態分析？百度百科解釋：指在不運行代碼的方式下，通過詞法分析、語法分析、控制流、數據流分析等技術對程序代碼進行掃描，驗證代碼是否滿足規范性、安全性、可靠性、可維護性等指標的一種代碼分析技術。
什么是靜態資源？參考這篇文章：web資源介紹 ，即瀏覽器可以直接解析的html語言，相對應的動態資源就是需要轉化為對應的html語言才能被瀏覽器識別的資源。
因此，Webpack就是可以分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。
為什么需要使用webpack？
我們從上圖可以看到，網頁項目中文件之間相互依賴才能正常工作，功能越多，網頁越豐富，依賴關系也就越復雜，也就越不利于開發和后期代碼的維護，為此前端社區涌現了很多好的實踐方法,而webpack則是目前最流行的方法，上圖就是就是利用webpack把有依賴關系的各種文件打包成一系列的靜態資源。
webpack有什么優點？
同時支持CommonJS和AMD模塊；
串聯式模塊加載器以及插件機制，讓其具有更好的靈活性和擴展性，例如提供對CoffeeScript、ES6的支持；
可以基于配置或者智能分析打包成多個文件，實現公共模塊或者按需加載；支持對CSS，圖片等資源進行打包，從而無需借助Grunt或Gulp
開發時在內存中完成打包，性能更快，完全可以支持開發過程的實時打包需求
對sourcemap有很好的支持，易于調試
有關CommonJS和AMD介紹參考這篇文章：JavaScript模塊化編程簡史
上面對webpack進行了介紹，下面讓我們對其進行實踐吧！
webpack的使用
在使用前我們需要對webpack有個整體認識，它是高度可配置的，有四個核心概念：入口(entry)、輸出(output)、loader、插件(plugins)，接下來會詳細說明。
1.安裝
前提條件：確保電腦安裝了最新版本Node.js,如何驗證是否安裝了node呢？打開終端，輸入以下命令：node -v，如下圖所示：
2.正式使用
接下來我會寫個demo從零開始一步步實踐webpack，因為我們需要使用node內置的npm（包管理工具）從NPM服務器下載webpack需要的第三方包，而由于國內網絡的限制，我們可以使用淘寶鏡像進行快速下載，在這里我只介紹一種方法，打開終端輸入指令：npm install -g cnpm --registry=http://registry.npm.taobao.org。
首先，在桌面創建一個空文件夾命名為webpack-demo,然后打開終端，輸入指令：
cd webpack-demo
npm init
當執行你npm init指令時，在當前文件夾下自動生成package.json包文件，其定義了這個項目所需要的各種模塊，以及項目的配置信息（比如名稱、版本、自定義的腳本等元數據），如果你不準備在npm中發布你的模塊，這些問題的答案都不重要，回車默認即可。
接下來，在項目中安裝webpack，命令如下：
cnpm install --save-dev webpack
這時候我們項目文件中多出了一個node-modules，這個文件夾里有我們需要的各種依賴，
而在package.json文件中多出一個devDependencies字段：
--save-dev 與-dev區別：
當我們使用--save-dev時在package.json文件中多出一個devDependencies字段，使用--save時在package.json文件中多出一個dependencies字段，前者 是開發時候依賴的東西，后者是發布之后還依賴的東西。
接下來我們寫個小的demo，在項目中創建兩個文件夾，一個命名為seller（賣家），一個命名為buyer（買家），在各自的文件夾中創建index.html和index.js，然后建立webpack的配置文件，文件目錄如下圖：
對項目文件進行打包，只需在終端輸入指令：
webpack
這時只需在seller和buyer中各自引入對應的js文件，打開index.html，在瀏覽器中顯示如下：
這個方式不利于開發，因為我們開發時不可避免的多次對代碼進行修改，我們可以使用給webpack配置devServer，這樣當我們對代碼進行修改的時候可以實現實時刷新，在配置前需要安裝相關依賴項,在終端輸入指令：
npm install webpack-dev-server --save-dev我們也可以在package.json包文件對npm的腳本部分進行如下圖所示進行設置
npm的start是一個特殊的腳本名稱，它的特殊性表現在，在命令行中使用npm start就可以執行相關命令，如果對應的此腳本名稱不是start，想要在命令行中運行時，需要這樣用npm run {script name}如npm run build，當我們在終端輸入 npm start指令時，輸出結果如下：
此時我們在瀏覽器中輸入localhost:8080/seller/會正常顯示出來。
開發總是離不開調試，但是打包后的文件有時我們不容易定位到出錯了的地方對應的源代碼的位置，webpack 中為我們提供了一個開發工具（Devtool），可以使用source map進行調試，我們只需在webpack.config.js中這樣配置：
具體內容請參考：開發輔助調試工具
Loader加載器的使用
webpack 可以使用loader 來預處理文件,允許打包除 JavaScript 之外的任何靜態資源，具體內容請查看：loader列表，下面我們在demo中簡單體驗下loader用法。
首先，安裝加載器：
npm install --save-dev css-loader style-loader file-loader
接著，分別在seller和buyer文件夾下創建selller.css和buyer.css,代碼如下：
//seller.css
body{
background: url("/bj.jpg");
}
#content{
color: coral;
}
//buyer.css
body{
background: gray;
}
#content{
color: white;
}
接下來，在webpack中配置如下圖所示信息：
最后，分別在buyer 和seller文件夾下的index.js，引入對應的css文件，即require('./XXX.css')
再次打包，啟動 ,在終端一次輸入以下指令：
webpack npm start在瀏覽器上一次輸入：
localhost:8080/buyer/localhost:8080/seller/效果圖如下：
最后在介紹下Plugin插件
插件目的在于解決loader無法實現的其他事無法實現的其他事
我們打開打包后生成的buyer.bundle.js和seller.bundle.js文件發現內部有許多注釋和空行，這會造成打包后的文件很大，這時我們可以使用UglifyJsPlugin插件對其進行壓縮,壓縮前有900k,壓縮后51k，使用插件很簡單只需在webpack.config.js中配置如下信息：
壓縮后文件格式如下：
以上就是我在這段時間對webpack學習記錄，以后會有webpack在react或vue項目中的使用記錄，附上github地址：https://github.com/BoryLee/webpack-demo
