前言：（面試讓介紹webpack，你可以這么答）簡單地說，Webpack其最核心的功能就是 解決模板之間的依賴，把各個模塊按照特定的規則和順序組織在一起，最終合並成一個JS文件（比如bundle.js）。這個整個過程也常常被稱為是 模塊打包。換句話說，Webpack是一個指令集合的配置文檔，然后通過配置好的這些指令去驅動程序做一些指令要求要做的事情。而這些動作都是通過自己寫的規則去做編譯，而且通過JavaScript的引入（import）語法讓Webpack知道需要它幫忙編譯什么東西（比如Pug、Sass等等）。所以我們始終會有一個入口文件（比如index.js）注入那些Preprocess，讓那些Preprocess可以通過這些入口文件的JavaScript讓Webpack去根據相關的配置指令編譯它，然后打包到一個出口文件中，比如bundles.js。
用vue-cli1/2搭建一個vue項目時，可以看到有很多關於webpack配置的文件。我們不需要知道那些繁瑣的配置文件有什么作用，只需在控制台輸入npm run dev，項目自動啟動，我們就可以愉快的寫業務代碼了。
雖然vue-cli幫我們做好了一切，我們就能不用學webpack了嗎？NoNoNo...現代前端工程師必備的技能就是模塊化構建打包項目，不信去那些招聘網站的前端JD看看。廢話不多說，下面讓我們用webpack構建一個簡單的vue-cli。
第一步：安裝NodeJS（webpack基於NodeJS）
下載地址：http://nodejs.cn/download/，傻瓜式安裝，一直下一步就ok。安裝完畢，在控制台輸入node -v檢查是否按照成功。
NodeJS是JavaScript的運行環境，像瀏覽器一樣。安裝之后可以通過
node命令運行JavaScript代碼，比如：node a.js
npm（node package manage of JavaScript）作用：Node.js下載后自帶npm，類似於迅雷下載資源，可以下載項目所需的依賴模塊/包。
- 允許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
- 允許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
- 允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用。
npm是國外的，可能會比較慢，建議安裝cnpm，安裝方法：npm install -g cnpm --registry=https://registry.npm.taobao.org
第二步：npm init初始化生成package.json
- 首先建立一個空的項目文件夾，
- 進入文件夾，
shift+右擊，出現【在此處打開命令窗口(W)】， - 點擊進入
cmd控制台，命令路徑即為當前文件夾目錄， - 然后輸入
npm init -y，回車，之后會在根目錄創建一個package.json。
package.json用來存放整個項目的依賴模塊/包，當我們把整個項目遷移到別的地方使用時，項目運行時會根據package.json的依賴參數自動下載所需模塊/包。
第三步：安裝webpack
建議安裝wepack3，webpack4對vue-cli的兼容還不是很好
命令：npm install webpack@3.12.0 --save-dev
測試webpack在本地是否可用，webpack -v 如果出現webpack為無效命令，則使用全局安裝webpack：npm install webpack@3.12.0 -g。安裝成功后就可以使用webpack命令玩耍了。
webpack可以看做是模塊打包機：所有資源都可以當成模塊，經過loader處理，最后打包成一個文件。
Grunt和Gulp的工作方式是：在一個配置文件中，指明對某些文件進行類似編譯，組合，壓縮等任務的具體步驟，工具之后可以自動替你完成這些任務。
webpack核心模塊：
- entry: 入口文件，可以多個
- output：出口文件，只能一個
- loader：幫助webpack處理js以外的文件
- plugins：增強webpack的能力，做更多的事
第四步：webpack打包模塊
很多文件類型，比如vue、css、img、字體...需要我們配置相應的loader才能完成正確解析並打包。
比如，把css打包到js文件中，需要安裝css加載器，安裝命令：npm install --save-dev style-loader css-loader
css-loader 和 style-loader，二者處理的任務不同
css-loader使你能夠使用類似@import 和 url(...)的方法實現 require()的功能
style-loader將所有的計算后的樣式用<style></style>加入頁面中，二者組合在一起使你能夠把樣式表嵌入webpack打包后的JS文件中
命令行打包（不推薦）：
webpack {entry file} {destination for bundled file} // 如webpack ./js/main.js ./dist/bundle.js 自動創建dist目錄
這種打包方式，在js文件中引入css文件時要注明loader：require('style-loader!css-loader!../css/index.css') 注意順序不能錯！
配置文件打包（推薦）：
需要在項目的根目錄創建webpack.config.js.項目里配置如下：
module.exports = {
entry: __dirname + "/src/main.js",// 入口文件，可以多個
output: {
path: __dirname + "/dist", // 絕對路徑，打包后的文件存放的文件夾
filename: "build.js" // 相對路徑，打包后輸出的文件
},
// 1. 不同webpack版本配置loader的方式不同，webpack3用loaders，webpack4用rules
// 2. 命令行方式引入css的require('style-loader!css-loader!../css/index.css') 就可以寫成 require('../css/index.css')
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(jpg|png|jpeg|svg)$/,
loader: 'url-loader',
options: {
// 大於10000字節會被打包成重命名的圖片資源，否則打包成base64
limit: 10000
// name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ['env'], // 處理關鍵字，es6/7/8/9...都能轉化
plugins: ['transform-runtime'] // 處理函數
}
}
]
}
}
package.json中配置
scripts:{"build": 'webpack'}（webpack命令會默認運行webpack.config.js文件），執行npm run build即可打包
第五步：搭建webpack服務器
上面4步就可以完成項目的打包任務，但是開發環境還需要更進一步配置。
webpack-dev-server可以像php/java/.net...一樣搭建為我們搭建一個服務器，這樣就可以熱更新項目代碼，實現實時運行項目，進而方便我們調試項目。
- 安裝：
npm install webpack-dev-server -g - 寫入到依賴：
npm install webpack-dev-server --save-dev - 配置命令：
scripts:{"dev": 'webpack-dev-server --hot --inline'}// 實現熱更新和在線編譯 - 運行命令：
npm run dev - 輸入localhost:8080/運行... // webpack-dev-server的默認端口是8080
具體代碼見：https://github.com/cwh2407606301/webpack-vue-cli
最后，webpack版本更新很頻繁，各種npm包也更新很頻繁，這就會導致一個兼容問題，動不動就報錯，這點很讓人頭疼，很容易會導致從入門到放棄。耐心，耐心，耐心....