一、什麼是webpack
webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(module bundler)。當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle。
點這裡解更多關於
JavaScript模組和webpack模組的資訊
二、安裝webpack
1. 安裝webpack前的準備工作
1.1 安裝node 和 npm
// node官網：https://nodejs.org/en/
// node中文網 http://nodejs.cn/download/
我的電腦安裝環境：Windows7 x64
1.下載安裝包“node-v0.12.0-x64.msi”後雙擊，然後一路next點選
2.Node.js預設安裝路徑為“C:\Program Files\nodejs\”，建議不要修改
3. 最後點選 Install 安裝完成
複製程式碼開啟cmd輸入node -v 檢查是否安裝成功
npm不需要單獨安裝，node安裝完成npm也安裝好了，輸入 npm -v檢查npm是否安裝成功
npm install xxx -g 全域性安裝時的安裝包都在哪裡呢？ 輸入
npm config ls檢視配置，找到對應目錄開啟就發現全域性安裝的檔案位置了哦，如下圖
一切就緒就可以開幹了~
1.2 建立一個檔案目錄,放置你的專案
$ mkdir webpack-start
$ cd webpack-start
複製程式碼在該目錄下執行npm init，生成package.json
$ npm init
複製程式碼
1.3 安裝webpack
$ npm install webpack webpack-cli -D
複製程式碼npm i -D 是 npm install --save-dev 的簡寫，是指安裝模組並儲存到 package.json 的 devDependencies中，主要在開發環境中的依賴包
2.配置webpack
2.1 感受 webpack4 的 0 配置
webpack打包會找到src下的index.js進行預設打包，所以先新建src目錄，並建立index.js檔案,如下圖：
// src/index.js 中寫了一句hello world
document.write("hello world");
複製程式碼此時就可以執行一下webpack打包命令了。
在此之前先插播一個小知識點：
- npm 5.2.0 版本中內建了伴生命令：npx，類似於 npm 簡化了專案開發中的依賴安裝與管理，該工具致力於提升開發者使用包提供的命令列的體驗。
- npx 會自動查詢當前依賴包中的可執行檔案，如果找不到，就會去 PATH 裡找。如果依然找不到，就會幫你安裝！
筆者本人本地npm已經升級到5.6.0了，檢視npx的版本是9.7.1的，如下圖：
那麼此時我們就可以直接使用npx來執行webpack打包的操作嘍~
// 執行命令
$ npx webpack
複製程式碼
此時執行完會發現報一個警告，因為沒有設定
mode,如果不設定mode的情況下,打包出來的檔案是自動壓縮
打包完成後發現生成了一個dist目錄和main.js檔案（預設檔名）。
如果不想壓縮的話可以執行
$ npx webpack --mode development
複製程式碼打包後的main.js內容就不會壓縮了
此時直接打包後的main就可以再瀏覽器中執行了，為了看效果，在dist目錄下新建一個index.html，並引入main.js，然後用瀏覽器開啟
上面發現預設一些配置其實還是不能滿足日常開發需要，所以我們還是對webpack進行一些配置，下面介紹webpack配置的問題。
2.2 快速配置webpack
在專案目錄下新建webpack.config.js檔案
/*建立並配置檔案webpack.config.js
entry：配置入口檔案的地址
output：配置出口檔案的地址
module：配置模組,主要用來配置不同檔案的載入器
plugins：配置外掛
devServer：配置開發伺服器
*/
module.exports = {
entry: '', // 入口檔案
output: {}, // 出口檔案（比如dist）
module: {}, // 對模組的處理 loader載入器
plugins: [], // webpack對應的外掛
devServer: {}, // 開發伺服器配置
mode: 'development' // 模式配置
}
複製程式碼2.2.1 基於上面，我們先開始最簡單的配置
配置entry和output，將src下的index.js 打包到dist目錄生成 bundle.js
// webpack.config.js
let path = require('path');
module.exports = {
entry: './src/index.js', // 設定入口檔案
output: {
filename:'bundle.js', // 打包後的檔名稱
path: path.join(__dirname,'dist') // 設定打包到哪個目錄下，且是絕對路徑
}
}
複製程式碼執行npx webpack後dist下生成bundle.js
2.2.2 配置執行檔案
在package.json中配置scripts之後就可以通過npm run xxx 來執行命令。
"build": "webpack"，可以通過執行 npm run build來打包，效果和上面打包一樣。
2.3 多入口
有時候我們的頁面可以不止一個HTML頁面，會有多個頁面，所以就需要多入口。
2.3.1. 沒有關係的但是要打包到一起去的，可以寫一個陣列，實現多個檔案打包成一個檔案
// src/index.js
document.write("hello world");
複製程式碼新建test.js：
// src/test.js
console.log('ok');
複製程式碼// webpack.config.js
// 1.寫成陣列的方式就可以打出多入口檔案，不過這裡打包後的檔案都合成了一個
let path = require('path');
module.exports = {
entry: ['./src/index.js', './src/test.js'],
output: {
filename: 'bundle.js',
path: path.join(__dirname,'dist')
}
}
複製程式碼打包後dist下生成bundle.js：
2.3.2. 每個檔案都單獨打包成一個檔案的
// webpack.config.js
// 2.entry需要寫成物件的方式，output中filename的name要根據entry中key進行匹配
let path = require('path');
module.exports = {
entry: {
index: './src/index.js',
test: './src/test.js'
},
output: {
// 2. [name]就可以將出口檔名和入口檔名一一對應
filename: '[name].js', // 打包後會生成index.js和test.js檔案
path: path.join(__dirname,'dist')
}
}
複製程式碼打包後dist目錄下分別生成了index.js和test.js
未完待續...
參考：