個人微信公眾號: 程序猿的月光寶盒
1 webpack介紹
1.1 webpack是什么？
Webpack 是一個前端資源的打包工具，它可以將js、image、css等資源當成一個模塊進行打包。
從圖中我們可以看出，Webpack 可以將js、css、png等多種靜態資源 進行打包.
1.2使用webpack的好處
12.1、模塊化開發
程序員在開發時可以分模塊創建不同的js、 css等小文件方便開發，最后使用webpack將這些小文件打包成一個文件，減少了http的請求次數。
webpack可以實現按需打包，為了避免出現打包文件過大可以打包成多個文件。
1.2.2、 編譯typescript、ES6等高級js語法
隨着前端技術的強大，開發中可以使用javascript的很多高級版本，比如：typescript、ES6等，方便開發，
webpack可以將打包文件轉換成瀏覽器可識別的js語法。
1.2.3、CSS預編譯
webpack允許在開發中使用Sass 和 Less等原生CSS的擴展技術，通過sass-loader、less-loader將Sass 和 Less的語法編譯成瀏覽器可識別的css語法。
1.3 webpack的缺點：
1.3.1、配置有些繁瑣
1.3.2、文檔不豐富
2.安裝webpack
2.1 安裝Node.js
webpack基於node.js運行，首先需要安裝node.js。
2.2 為什么會有node.js？
傳統意義上的 JavaScript 運行在瀏覽器上，Chrome 使用的 JavaScript 引擎是 V8，Node.js 是一個運行在服務端的框架，它的底層就使用了 V8 引擎，這樣就可以使用javascript去編寫一些服務端的程序，這樣也就實現了用
javaScript去開發 Apache + PHP 以及 Java Servlet所開發的服務端功能，這樣做的好處就是前端和后端都采用
javascript，即開發一份js程序即可以運行在前端也可以運行的服務端，這樣比一個應用使用多種語言在開發效率上要高，不過node.js屬於新興產品，一些公司也在嘗試使用node.js完成一些業務領域，node.js基於V8引擎，基於事件驅動機制，在特定領域性能出色，比如用node.js實現消息推送、狀態監控等的業務功能非常合適。
2.3安裝Node.js
1、下載對應你系統的Node.js版本:
https://nodejs.org/en/download/
推薦下載LTS版本，此次我安裝v12.14.1。
2 、選安裝目錄進行安裝
默認即可
安裝完成檢查PATH環境變量是否設置了node.js的路徑。
3、測試
在命令提示符下輸入命令
node ‐v
會顯示當前node的版本
2.4安裝NPM
1、自動安裝NPM
npm全稱Node Package Manager，他是node包管理和分發的工具，使用NPM可以對應用的依賴進行管理，NPM的功能和服務端項目構建工具maven差不多，我們通過npm 可以很方便地下載js庫，打包js文件。
node.js已經集成了npm工具，在命令提示符輸入 npm -v 可查看當前npm版本
2、設置包路徑
包路徑就是npm從遠程下載的js包所存放的路徑。
使用 npm config ls 查詢NPM管理包路徑（NPM下載的依賴包所存放的路徑）
NPM 默認的管理包路徑在C:/用戶/[用戶名]/AppData/Roming/npm/node_meodules，為了方便對依賴包管理，我們將管理包的路徑設置在單獨的地方，本教程將安裝目錄設置在node.js的目錄下，創建npm_modules和
npm_cache，執行下邊的命令：
本教程安裝node.js在D:\Program Files\nodejs下所以執行命令如下：
npm config set prefix "C:\Program Files\nodejs\npm_modules"
npm config set cache "c:\Program Files\nodejs\npm_cache"
此時再使用 npm config ls 查詢NPM管理包路徑發現路徑已更改
2.5安裝cnpm
npm默認會去國外的鏡像去下載js包，在開發中通常我們使用國內鏡像，這里我們使用淘寶鏡像
下邊我們來安裝cnpm：
有時我們使用npm下載資源會很慢，所以我們可以安裝一個cnmp(淘寶鏡像)來加快下載速度。
輸入命令，進行全局安裝淘寶鏡像。
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝后，我們可以使用以下命令來查看cnpm的版本
cnpm -v
nrm ls 查看鏡像已經指向taobao
使nrm use XXX切換 鏡像
如果nrm沒有安裝則需要進行全局安裝：cnpm install -g nrm
2.6安裝webpack
webpack安裝分為本地安裝和全局安裝：
本地安裝：僅將webpack安裝在當前項目的node_modules目錄中，僅對當前項目有效。
全局安裝：將webpack安裝在本機，對所有項目有效，全局安裝會鎖定一個webpack版本，該版本可能不適用某個項目。全局安裝需要添加 -g 參數。
進入webpacktest測試目錄目錄，運行：
1）本地安裝：
只在我的項目中使用 webpack，需要進行本地安裝，因為項目和項目所用的webpack的版本不一樣。本地安裝就會將webpack的js包下載到項目下的npm_modeuls目錄下。
在門戶目錄下創建webpack測試目錄webpacktest01：
npm install --save-dev webpack 或 cnpm install --save-dev webpack
npm install --save-dev webpack-cli (4.0以后的版本需要安裝webpack-cli)
2）全局安裝加-g，如下：
全局安裝就將webpack的js包下載到npm的包路徑下。
npm install webpack -g 或 cnpm install webpack -g
3）安裝webpack指定的版本：
本教程使用webpack3.6.0，安裝webpack3.6.0：
進入webpacktest測試目錄，運行：cnpm install --save-dev webpack@3.6.0
全局安裝：npm install webpack@3.6.0 -g或 cnpm install webpack@3.6.0 -g
3.安裝總結
4.入門程序
目標:
通過本入門程序體會webpack打包的過程及模塊化開發的思想。
通過入門程序實現對js文件的打包，體會webpack是如何對應用進行模塊化管理。
對上篇我的博客中計算器的例子使用webpack進行模塊化管理
4.1定義模塊
創建webpacktest01目錄，將vue.min.js及vueTest02.html拷貝到目錄下。
4.1.1、定義model-add.js
在webpacktest01目錄下創建model-add.js
將本程序使用的加法運算的js方法抽取到一個js文件，此文件就是一個模塊
// 模塊文件
// 添加模塊
var add= function (x,y) {
return x+y;
};
// 導出
module.exports.add=add;
// module.exports ={add,add2};//如果有多個方法這樣導出
// module.exports.add2 = add2//如果有多個方法也可以這樣導出
4.1.2、定義main.js
在webpacktest01目錄下創建main.js，main.js是本程序的js主文件，包括如下內容：
1、在此文件中會引用model-add.js模塊
2、引用vue.min.js（它也一個模塊）
3、將html頁面中構建vue實例的代碼放在main.js中。
main.js的代碼如下
// 入口文件
// 導入模塊model-add.js文件
var {add} = require("./model-add.js");
var Vue = require("./vue.min.js");
var vm = new Vue({
el: "#test2",//vm接管了app區域的管理
data: {//model數據
name: "金聖聰的計算器",
num1: 0,
num2: 0,
result:0,
url:"http://www.baidu.com"
},
//定義方法,方法名:function(){}
methods:{
change:function () {
//在vm中引用自己的變量要加this指定
this.result=add(Number.parseInt(this.num1),Number.parseInt(this.num2));
// this.result=Number.parseInt(this.num1)+Number.parseInt(this.num2);
// alert("計算結果"+this.result)
}
}
});
4.1.3 、打包測試
上邊將model-add.js模塊及main.js主文件編寫完成，下邊使用webpack對這些js文件進行打包
1、進入程序目錄，運行cmd執行webpack main.js build.js ，
這段指令表示將main.js打包輸出為 build.js文件
執行完成，觀察程序目錄是否出現build.js。
2、在html中引用build.js
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>MyFirstTest4VueJs02-4計算器</title>
</head>
<body>
<!--定義view部分-->
<div id="test2">
<!--{{name}}-->
<!--解決閃爍-->
<a :href="url">
<span v-text="name"></span>
</a>
<br/>
<input type="number" v-model="num1">+
<input type="number" v-model="num2">=
<!--{{Number.parseInt(num1)+Number.parseInt(num2)}}-->
<!--解決閃爍-->
<!--<span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>-->
<span v-text="result"></span>
<!--注意:這里的change方法沒有" () "-->
<button v-on:click="change">計算</button>
</div>
</body>
<!--為了防止出現空白頁面-->
<!--<script src="vue.min.js"></script>-->
<script src="build.js"></script>
<!--<script>-->
<!--var vm = new Vue({-->
<!--el: "#test2",//vm接管了app區域的管理-->
<!--data: {//model數據-->
<!--name: "金聖聰的計算器",-->
<!--num1: 0,-->
<!--num2: 0,-->
<!--result:0,-->
<!--url:"http://www.baidu.com"-->
<!--},-->
<!--//定義方法,方法名:function(){}-->
<!--methods:{-->
<!--change:function () {-->
<!--//在vm中引用自己的變量要加this指定-->
<!--this.result=Number.parseInt(this.num1)+Number.parseInt(this.num2);-->
<!--// alert("計算結果"+this.result)-->
<!--}-->
<!--}-->
<!--});-->
<!--</script>-->
</html>
4.1.4、測試總結
測試功能：
1）輸入任意加數，其和會自動計算
2）點擊“計算”會調用model01.js中的add方法
總結：
webpack可以將js分模塊開發，開發完成對各模塊代碼打包成一個統一的文件。
前端模塊開發的思想和服務端模塊開發的思想是一致的，有利於多人協助開發。
4.2 webpack-dev-server
webpack-dev-server開發服務器，它的功能可以實現熱加載 並且自動刷新瀏覽器。
4.2.1創建一個新的程序目錄
這里我們創建webpacktest02目錄，將webpack入門程序的代碼拷貝進來，並在目錄下創建src目錄、dist目錄。
將main.js和model-add.js和vue.min.js拷貝到src目錄。
4.2.2安裝配置
1、安裝webpack-dev-server
使用webpack-dev-server需要安裝webpack、webpack-dev-server和html-webpack-plugin三個包。
cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev
安裝完成，會發現程序目錄出現一個package.json文件，此文件中記錄了程序的依賴。
2、配置webpack-dev-server
在package.json中配置script
"scripts": {
"dev": "webpack-dev-server --inline --hot --open --port 5008"
},
--inline：自動刷新
--hot：熱加載
--port：指定端口
--open：自動在默認瀏覽器打開
--host：可以指定服務器的 ip，不指定則為127.0.0.1，如果對外發布則填寫公網ip地址
此時package.json的文件內容如下：
{
"scripts": {
"dev": "webpack-dev-server --inline --hot --open --port 5008"
},
"devDependencies": {
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
devDependencies：開發人員在開發過程中所需要的依賴。
scripts：可執行的命令
4.2.3配置webpack.config.js
在webpacktest02目錄下創建 webpack.config.js， webpack.config.js是webpack的配置文件。在此文件中可以配置應用的入口文件、輸出配置、插件等，其中要實現熱加載自動刷新功能需要配置html-webpack-plugin插件。html-webpack-plugin的作用是根據html模板在內存生成html文件，它的工作原理是根據模板文件在內存中生成一個index.html文件。
1、配置模板文件
將原來的vueTest02.html作為模板文件，為了和內存中的index.html文件名區別，注意將vueTest02.html中的script標簽去掉，內容如下：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>MyFirstTest4VueJs02-4計算器</title>
</head>
<body>
<!--定義view部分-->
<div id="test2">
<!--{{name}}-->
<!--解決閃爍-->
<a :href="url">
<span v-text="name"></span>
</a>
<br/>
<input type="number" v-model="num1">+
<input type="number" v-model="num2">=
<!--{{Number.parseInt(num1)+Number.parseInt(num2)}}-->
<!--解決閃爍-->
<!--<span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>-->
<span v-text="result"></span>
<!--注意:這里的change方法沒有" () "-->
<button v-on:click="change">計算</button>
</div>
</body>
<!--為了防止出現空白頁面-->
<!--<script src="vue.min.js"></script>-->
<!--<script src="build.js"></script>-->
<!--<script>-->
<!--var vm = new Vue({-->
<!--el: "#test2",//vm接管了app區域的管理-->
<!--data: {//model數據-->
<!--name: "金聖聰的計算器",-->
<!--num1: 0,-->
<!--num2: 0,-->
<!--result:0,-->
<!--url:"http://www.baidu.com"-->
<!--},-->
<!--//定義方法,方法名:function(){}-->
<!--methods:{-->
<!--change:function () {-->
<!--//在vm中引用自己的變量要加this指定-->
<!--this.result=Number.parseInt(this.num1)+Number.parseInt(this.num2);-->
<!--// alert("計算結果"+this.result)-->
<!--}-->
<!--}-->
<!--});-->
<!--</script>-->
</html>
4.2.4、配置html-webpack-plugin
在webpack.config.js中配置html-webpack-plugin插件
var htmlwp = require('html-webpack-plugin');
module.exports={
entry:'./src/main.js', //指定打包的入口文件
output:{
path : __dirname+'/dist', // 注意：__dirname表示webpack.config.js所在目錄的絕對路徑
filename:'build.js' //輸出文件
},
plugins:[
new htmlwp({
title: '首頁', //生成的頁面標題<head><title>首頁</title></head>
filename: 'index.html', //webpack‐dev‐server在內存中生成的文件名稱，自動將build注入到這個頁面底部，才能實現自動刷新功能
template: 'vueTest02.html' //根據vueTest02.html這個模板來生成(這個文件請程序員自己生成)
})
]
}
4.2.5啟動文件
方式1、進入 webpacktest02目錄，執行npm run dev
方式2、使用webstorm，右鍵package.json文件，選擇Show npm Scripts
打開窗口：
雙擊 dev。
注意：dev就是在package.json中配置的webpack dev server命令。
發現啟動成功自動打開瀏覽器。
修改src中的任意文件內容，自動加載並刷新瀏覽器。
4.2.6debug調試
使用了webpack之后就不能采用傳統js的調試方法在chrome中打斷點。
webpack 將多個源文件打包成一個文件，並且文件的內容產生了很大的變化，webpack提供devtool進行調試，
devtool是基於sourcemap的方式，在調試時會生成一個map文件，其內容記錄生成文件和源文件的內容映射，即
生成文件中的哪個位置對應源文件中的哪個位置，有了sourcemap就可以在調試時看到源代碼。
配置如下：
1、在webpack.config.js中配置：
devtool: 'eval‐source‐map',
webpack.config.js部分內容如下：
var htmlwp = require('html-webpack-plugin');
module.exports={
entry:'./src/main.js', //指定打包的入口文件
output:{
path : __dirname+'/dist', // 注意：__dirname表示webpack.config.js所在目錄的絕對路徑
filename:'build.js' //輸出文件
},
devtool: 'eval‐source‐map',
plugins:[
new htmlwp({
title: '首頁', //生成的頁面標題<head><title>首頁</title></head>
filename: 'index.html', //webpack‐dev‐server在內存中生成的文件名稱，自動將build注入到這個頁面底部，才能實現自動刷新功能
template: 'vueTest02.html' //根據vueTest02.html這個模板來生成(這個文件請程序員自己生成)
})
]
};
2、在js中跟蹤代碼的位置上添加debugger
一個栗子：
在add方法中添加debugger
// 模塊文件
// 添加模塊
var add= function (x,y) {
debugger;
return x+y;
};
// 導出
module.exports.add=add;
啟動應用，刷新頁面跟蹤代碼：
點擊“計算”按鈕 即進入debugger代碼位置，此時可以使用chrome進行調試了。
