1分鐘熟悉webpack

　　隨着業務發展和前端人員的增長，搭建一個通用框架以及制定統一規範就成了必然。對於選型這方面，一開始好像就沒考慮其餘框架，直接選了webpack。webpack的優勢就很少說了，可擴展性，強大的npm插件庫，說幹就幹。

　　基於公司基礎以及業務限制，一口吃不成個胖子，沒辦法作成最理想的狀態，也就是一份配置文件，npm build能夠直接打包全部項目。也許將來會是這個狀態，但目前來看，這種一勞永逸的方案並非咱們公司最合適的方案。一方面公司項目機制並不成熟，老項目也很多，直接打包全部項目頗有可能影響老項目;另外一方面打包全部項目權限太大，一我的犯錯，可能致使公司全部項目都出問題，因此仍是本身負責本身的項目就好。如今實現的效果也還不錯，簡簡單單3句命令，就實現了本地、測試和線上環境的區分和打包。命令實例以下(項目名稱是testDemo)：

　　如今就說下具體的規劃吧，想法其實也很簡單：

　　一、新建2個同級目錄，一個是webpack(項目源目錄)，一個是 build(打包以後的項目的目錄);

　　二、經過運行不一樣的命令(主要是命令最後面的項目名稱不同)，將項目從webpack打包到 build 裏，而且webpack和build的目錄結構如出一轍，好比上面實例中的項目testDemo，它的源目錄結構是webpack/app/testDemo，那打包以後的路徑就是build/app/testDemo，這樣的結構更易於操做和後期維護。

　　先來看看webpack的目錄結構吧：

　　說明：

　　·node_modules：安裝好的包。

　　·common：公共目錄，好比裏面能夠放公共css、公共插件等。

　　·app、store：項目目錄，和 build 內的目錄保持一致。

　　·.gitignore：須要忽略的東西，好比 node_modules 等。

　　·package.json：配置文件，若是下載了新的 loader，package.json 文件會有變更。

　　·webpack.common.js：webpack 的公共配置文件。

　　·webpack.dev.js：本地開發配置文件。

　　·webpack.prod.js：線上環境配置文件。

　　·webpack.test.js：測試環境配置文件。

　　·package-lock.json：npm init 過程當中生成的 json 文件，無需關心。

　　那麼如今面臨的就有如下幾個問題了：

　　一、我想要打包哪一個文件就能夠打包哪一個文件，而且打包到指定目錄，這個是在哪配置的，應該如何配置?

　　二、配置文件裏都有入口配置和出口配置，而且若是給對應的 html 對應的加上他想要的主 js 文件，我知道這個確定是動態獲取和配置，但具體應該怎麼實現?

　　三、css、js、html、img 是怎麼處理的，用到了哪些 loader?

　　四、我知道的配置文件只有一個，爲何個人會有4個：webpack.common.js、webpack.dev.js、webpack.test.js、webpack.prod.js，爲何要寫這麼多配置文件，以及是怎麼實現的?

　　五、打包一次就會生成一個目錄和一批文件，並且後綴名還不同，長此以往文件夾豈不是愈來愈大，怎麼解決這個問題，原理又是什麼?

　　六、不管你有沒有修改文件，只要打包一次，webpack 就會從新運行一遍，而且生成不一樣的文件名，有沒有什麼辦法避免這種狀況，至少未修改的文件就不會再被打包一遍?

　　七、如何提取公共模塊?好比 index1.js 和 index2.js 都引用了 jQuery，有沒有什麼辦法，可讓打包後的 jQuery 只有一份?

　　八、本地環境我並不想壓縮代碼，由於壓縮會很慢，測試和線上環境纔會去壓縮，這個該怎麼實現，須要用什麼 loader?

　　九、打包以後的 css 我並不像被壓縮在 js 一塊，想單獨放一個 css 文件夾裏，這個能夠實現嗎，怎麼去實現?

　　十、css 是怎麼實現的壓縮，和 js 壓縮同樣嗎，須要注意什麼?

　　十一、如何給靜態資源配置域名地址，而本地不須要，這個怎麼實現?

　　十二、package.json 裏的 devDependencies 和dependencies 有什麼區別，須要注意什麼?

　　1三、.gitignore 的做用，以及如何配置?

　　下面一一來解答：

　　一、想要打包哪一個文件就能夠打包哪一個文件，也就是上面提到的 npm start app/testDemo，運行這個命令，就會打包 webpack 下 app/testDemo 這個目錄，想要實現這個，只需配置package.json和 webpack.common.js 便可：

　　package.json(不懂的能夠去了解下scripts)

　　webpack.common.js

　　這樣就實現了想要打包哪一個文件就能夠打包哪一個文件，至於打包到哪一個文件，就須要本身手動寫一些配置了。

　　主要配置好 output 便可：

　　二、單頁面文件比較簡單，好比 index.html ,須要引入 index.js 打包後生成的 js 文件，直接 script 標籤引入便可，但手動的方法不方便且易出錯，怎麼實現 index.html 自動引入 index.js 打包後的文件呢?這時候須要用到一個 loader，即：html-webpack-plugin，具體實現方法也很簡單：

　　可是若是出現多頁面，而且有不少不少項目，不可能每一個項目都這樣一步一步去配置，這時候就須要動態獲取 entry、動態加載HtmlWebpackPlugin。

　　不過動態加載是有要求和前提的，對文件目錄結構以及命名有必定的要求的規範，不是你想怎麼寫均可以打包成功。

　　我這裏的規範以 testDemo 爲例：

　　

　　·項目的目錄結構和 testDemo保持一致：html文件在最外層，js、css、json、img單獨文件夾。

　　·js 目錄純粹化：因爲webpack.common.js 裏是動態獲取 entry和動態加載 HtmlWebpackPlugin，因此 js 文件夾下的文件都會加進去而且被相應的 html 引用，因此不須要加進去的 js 文件必定不要放在 js 文件夾下面，能夠新建一個文件夾去放，好比 common/meta.js。

　　·html 和 js 的文件名保持一致：html 文件須要引入的入口js 文件名必須和html 的文件名必須保持一致，好比 index.html 對應的 js 就是 index.js，edit.html 對應的 js 就是 edit.js，這樣配置文件纔會知道哪一個 html 文件須要加載什麼 js 文件。

　　三、css、js、html、img 要用到哪些 loader，用過webpack 的其實都應該比較熟練了，我就直接貼代碼吧。

　　須要稍微注意一點的是處理圖片的 loader 以及圖片的引用方式。

　　url-loader中的 limit = 1，表明大小小於 1kb的圖片地址會被轉化成 base64 的 url;html-loader 是爲了處理 html 中的圖片地址;js 中的圖片須要經過 require 方式進行引用，直接引用無效。

　　(1)HTML

　　(2)CSS

　　(3)JS

　　四、配置文件文件分爲這4個，實際上是爲了更好的區分環境(本地、測試、線上)以及維護配置代碼。

　　·webpack.common.js 是公共配置文件，裏面是本地、測試和線上都須要的配置，包括動態入口和出口、處理html、css、js、圖片等須要的 loader、提取公共文件、配置別名等;

　　·webpack.dev.js 是本地環境配置文件，裏面只須要配置 publicPath、監聽代碼變化自動提交併刷新網頁便可;

　　·webpack.test.js 是測試環境配置文件，裏面也須要配置publicPath，但測試環境的publicPath 和本地的publicPath 不同，咱們約定的是測試環境的域名和路徑，測試環境也須要加上清除文件夾的操做，防止每次 webpack 致使文件過大，還有壓縮文件的操做，包括 js 和 css 的壓縮，同時也會配置 test 的環境變量;

　　·webpack.prod.js 就是線上環境配置文件，它和測試環境的配置文件幾乎如出一轍，惟獨publicPath 是線上環境的域名和路徑。

　　而 npm start app/testDemo、npm test app/testDemo、npm run build app/testDemo 就是根據環境不一樣，執行不一樣的配置文件來達到不一樣的效果。

　　具體的實現到時候直接貼代碼，不一樣環境的配置文件如何引用公共配置文件能夠稍微說一下，主要經過 webpack-merge 。

　　好比以下是 webpack.dev.js：

　　五、爲了解決文件愈來愈大的問題，只須要每次在打包以前，將原來目錄裏的文件清除掉便可。

　　六、爲了不未修改的文件被打包，webpack 自己自帶一個插件去處理：

　　七、提取公共模塊，webpack 也自帶了一個插件去處理：

　　八、本地不須要壓縮，測試和線上環境纔去壓縮，以前的環境劃分就派上了很好的用場了，只須要在 webpack.test.js 和 webpack.prod.js 中配置壓縮便可。至於用到什麼 loader，js 通常用的是uglifyjs-webpack-plugin，css 用的是optimize-css-assets-webpack-plugin。配置以下：

　　uglify裏面的配置可不寫，我這裏主要寫的是ie8 的兼容，sourceMap 也可設置爲 true，這樣利於調試。

　　optimize-css-assets-webpack-plugin能使 css 最小化，若是不作處理的話，壓縮後會致使一些兼容的前綴丟失，因此裏面添加了一些配置，方式壓縮過狠。

　　九、若是不作任何處理的話，打包後的 css 會被壓縮在 js 之中，第一不太美觀，第二會致使 js 文件過大，因此有必要將 css 分離出來，這時候要用到一個extract-text-webpack-plugin 的插件。配置以下：

　　十、前面已經說過了，css 壓縮採用optimize-css-assets-webpack-plugin插件，js 壓縮採用的是 uglify，要注意的就是若是不作任何配置，css 裏有些作兼容的前綴，好比 -webkit- 等就會被看成沒用的東西被壓縮掉，再加一些配置就能夠了。

　　十一、給靜態資源配置不一樣的地址，不管是本地仍是測試仍是線上，都是經過 publicPath 進行實現的。

　　本地：

　　測試(前半部分代碼和本地保持一致)：

　　線上(前半部分代碼和本地保持一致)：

　　十二、之前一直在糾結一個npm安裝的包依賴管理的問題。是這樣的：咱們在使用 npm install 安裝模塊或插件的時候，有兩種命令把他們寫入到 package.json 文件裏面去，他們是：--save-dev 或 --save。

　　首先須要說明的是Dependencies一詞的中文意思是依賴和附屬的意思，而dev則是 develop(開發)的簡寫。

　　因此它們的區別在 package.json 文件裏面體現出來的就是，使用 --save-dev 安裝的 插件，被寫入到 devDependencies 域裏面去，而使用--save 安裝的插件，則是被寫入到 dependencies 區塊裏面去。

　　那 package.json 文件裏面的devDependencies 和dependencies 對象有什麼區別呢?

　　devDependencies 裏面的插件只用於開發環境，不用於生產環境，而dependencies 是須要發佈到生產環境的。

　　好比咱們寫一個項目要依賴於jQuery，沒有這個包的依賴運行就會報錯，這時候就把這個依賴寫入dependencies;

　　而咱們使用的一些構建工具好比glup、webpack這些只是在開發中使用的包，上線之後就和他們不要緊了，因此將它寫入devDependencies。

　　1三、.gitignore 就是將不想上傳的文件或文件夾上傳到倉庫裏，好比 npm install 生成的巨大無比的 node_modules。使用方法參考：https://git-scm.com/docs/giti...

　　差很少就介紹到這吧，下面直接把代碼貼出來，能夠直接把 package.json 引到本身的文件中，而後 npm install直接安裝相關依賴。固然也能夠本身 npm init 後一個一個下載安裝，本身喜歡就好。

　　補充一些相關命令：

　　·安裝淘寶鏡像：

　　·刪除 node_modules ：

　　·安裝loader(好比安裝html-loader 和 vue)：

　　package.json

　　webpack.common.js

　　webpack.dev.js

　　webpack.test.js

　　webpack.prod.js