20181203——Webpack 不是開始的開始
什麼是webpack
Webpack 是德國開發者 Tobias Koppers 開發的模組載入器兼打包工具，在webpack中，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作為模組來使用和處理。因此, Webpack 當中 js 可以引用 css, css 中可以嵌入圖片 dataUrl。
對應各種不同檔案型別的資源, Webpack 有對應的模組 loader比如vue用的是vue-loader當然這是後話，在後面我們再來說。
# 確保已經進入專案目錄 # 確定已經有 package.json，沒有就通過 npm init # 建立，直接一路回車就好，後面再來詳細說裡面的內容。 # 安裝 webpack 依賴 npm install webpack webpack-cli --save-dev # 簡單的寫法：-_-,縮寫形式 npm i webpack webpack-cli -D # –save：模組名將被新增到dependencies，可以簡化為引數-S。 # –save-dev: 模組名將被新增到devDependencies，可以簡化為引數-D。
首先建立一個靜態頁面 index.html 和一個 JS 入口檔案 entry.js,（這裡你想用什麼名字都可以，只需要在打包的時候讀取檔案為該名字就好，不過，到時候就知道這個名字的含義啦！
html
<html> <head> <meta charset="utf-8"> </head> <body> <h1 id="app"></h1> <script src="./dist/bundle.js"></script> <!-- 注意這裡引入的不是我們建立的檔案，而是用webpack生成的檔案 --> </body> </html>
js
document.getElementById('app').innerHTML="這是我第一個打包成功的程式";
由於我們將 webpack 安裝在了 專案目錄。所以是不會向終端寫入 webpack 命令的，這時我們可以像 npm script 中加入命令 :
"scripts": {
"start": "webpack entry.js --output-filename=./bundle.js --mode=development"
},
然後我們執行 npm run start,就會執行 webpack entry.js --output-filename=./bundle.js --mode=development。
在瀏覽器中開啟index.html，就能看到我們設定的文字啦！：這是我第一個打包成功的程式
這麼簡單的功能直接在html中引入不就好了嗎？確實是這樣的，不過我們這才剛剛開始嘛，不要急。
下面我們再來增加一個檔案，名為first.js內容如下：
var h2= document.createElement("h2")
h2.innerHTML="不是吧，那麼快第二個打包程式啦！";
document.body.appendChild(h2);
Webpack 會分析入口檔案，解析包含依賴關係的各個檔案。這些檔案（模組）都打包到 bundle.js 。Webpack 會給每個模組分配一個唯一的 id 並通過這個 id 索引和訪問模組。在頁面啟動時，會先執行 entry.js 中的程式碼，其它模組會在執行 require 的時候再執行。
更改 entry.js:
document.getElementById('app').innerHTML="這是我第一個打包成功的程式";
//新增
require("./first.js");
loader介紹
Loader可以理解為是模組和資源的轉換器，它本身是一個函式，接受原始檔作為引數，返回轉換的結果。這樣，我們就可以通過require來載入任何型別的模組或檔案，比如VUE、JSX、SASS 或圖片
Loader可以通過管道方式鏈式呼叫，每個loader可以把資源轉換成任意格式並傳遞給下一個loader，但是最後一個loader必須返回JavaScript。
Loader可以同步或非同步執行。
Loader執行在node.js環境中，所以可以做任何可能的事情。
Loader可以接受引數，以此來傳遞配置項給loader。
Loader可以通過副檔名（或正則表示式）繫結給不同型別的檔案。
Loader可以通過npm釋出和安裝。
除了通過package.json的main指定，通常的模組也可以匯出一個loader來使用。
Loader可以訪問配置。
外掛可以讓loader擁有更多特性。
Loader可以分發出附加的任意檔案。
載入 CSS 檔案
還是上一篇部落格中的檔案，來新增一個css檔案。style.css,在裡面新增
body {
background: red;
}
修改我們的entry.js，原檔案不變，新增require("!style-loader!css-loader!./style.css");,用來引入我們的css檔案。
副檔名自動繫結loader
這就是我們的loader的使用方式了。如果每次 require CSS 檔案的時候都要寫 loader 字首!style-loader!css-loader!這樣的東西，顯然是一件很麻煩的事情。我們需要它可以根據模組型別（副檔名）來自動繫結需要的 loader。
來看看更簡便的方式，將 entry.js 中的 require("!style-loader!css-loader!./style.css")修改為require("./style.css")，可以改變一個背景顏色讓你更明顯的檢視到變化！然後執行：
瞭解webpack配置
Webpack在執行的時候，除了在命令列傳入引數，還可以通過指定的配置檔案來執行。預設情況下，會搜尋當前目錄的webpack.config.js檔案，這個檔案是一個 node.js 模組，返回一個 json 格式的配置資訊物件，或者通過 --config 選項來指定配置檔案。
我們現在僅僅需要執行:webpack，如果你的配置沒有問題的話，可以在命令列中看到正確的輸出，因為這個命令會自動在當前目錄中查詢webpack.config.js的配置檔案，並按照裡面定義的規則來進行執行。
上面我們僅僅是使用了這個配置檔案，我們肯定想在實際的工作環境中，自我對於專案進行鍼對性的配置。下面我們就先來簡單的瞭解一下里面引數的意義：
entry：指入口檔案的配置項，它是一個數組的原因是webpack允許多個入口點。
當然如果你只有一個入口的話，也可以直接使用雙引號"./entry.js"
output：配置打包結果，path定義了輸出的資料夾，filename則定義了打包結果檔案的名稱
module：定義了對模組的處理邏輯，這裡可以用loaders定義了一系列的載入器，以及一些正則。當需要載入的檔案匹配test的正則時，就會呼叫後面的loader對檔案進行處理，這正是webpack強大的原因。
瞭解webpack外掛
下面就來看看webpack中的外掛：
外掛可以完成更多loader不能完成的功能。外掛的使用一般是在webpack.config.js中的plugins 選項中指定。
Webpack本身內建了一些常用的外掛，還可以通過npm安裝第三方外掛。
接下來，我們從一個最簡單的，用來給輸出的檔案頭部添加註釋資訊BannerPlugin的內建外掛來實踐外掛的配置和執行。
修改webpack.config.js，新增 plugins配置項：
var Webpack = require("webpack");//必須引入
module:{
},
plugins: [
new webpack.BannerPlugin("這裡是打包檔案頭部註釋！")//注意這是一個數組..
]
載入圖片
現在去我們的專案目錄中新增img資料夾，新增兩張圖片，一張大圖jpg，一張小圖png。
我們已經把webpack的內容瞭解了一部分了，那麼在生產環境中，我不想每一次進行改變，都去命令列中執行我們的webpack的命令，我們應該怎麼樣實現改變後自動更新呢？
webpack 為我們提供了一個webpack --watch，他會啟動監聽模式。開啟監聽模式後，沒有變化的模組會在編譯後快取到記憶體中，而不會每次都被重新編譯，所以監聽模式的整體速度是很快的。
去執行這個命令試試吧！！
在我們改變程式碼之後，命令列中可以看到直接就自動編譯了，但是顯然不夠智慧，還需要我們手動去重新整理瀏覽器，（其實用liveloadhack成自動重新整理！）。
我反正不能忍，還要手動重新整理瀏覽器。所以使用webpack-dev-server會是一個更好的辦法！
它將在localhost:8080啟動一個express靜態資源web伺服器，並且會以監聽模式自動執行webpack，在瀏覽器開啟http://localhost:8080/或 http://localhost:8080/webpack-dev-server/ 可以瀏覽專案中的頁面和編譯後的資源輸出，並且通過一個socket.io服務實時監聽它們的變化並自動重新整理頁面。
後面的講解大部分都是與vue聯用，已經瞭解webpack大部分概念與操作，也明白了為什麼vue-cli命令列