1.執行npm install nrm -g，安裝nrm，此模塊主要用於切換npm鏡像源，簡化手動配置步驟
2.執行 nrm ls，可以看到npm源地址列表，當前使用的是默認源，npm https://registry.npmjs.org/
3.執行 nrm use taobao，將npm的源修改為taobao所指向的地址
4.再次執行nrm ls，可以看到npm的源已經指向了taobao源，今后執行npm命令就默認從taobao鏡像拉取模塊
5.執行命令npm config ls：查看npm配置，檢查源是否切換成功
6.在VSCode中打開終端，切換到當前項目根目錄下，輸入npm init -y，初始化項目。初始化完成后會在項目根目錄下生成package.json文件
7.執行npm install webpack -g，安裝全局webpack模塊，安裝完成后才能在終端中輸入webpack命令，否則會提示無法將“webpack”項識別為 cmdlet、函數、腳本文件或可運行程序的名稱。
8.執行命令 npm install webpack-cli -g，全局安裝webpack-cli
9.執行命令下面命令，勇webpack將./src/main.js打包生成為./dist/bundle.js文件
【webpack ./src/main.js -o ./dist/bundle.js --mode development】
注意：-o是webpack 4.x之后新增的選項，低版本不需要加-o，4.x之后如果不加-o就會報錯
--mode development：代表是以開發模式打包，如果不加句，默認以發布模式打包，但是會在終端提示黃色警告信息。
10.之后在Index.html中引用dist目錄下的bundle.js，測試能正確運行。
11.由於每次使用webpack打包都需要在webpack后面填寫一長串指令，為了簡化這個步驟，我們可以使用webpack.config.js來進行配置。
在項目根目錄下新增文件 webpack.config.js，並寫入如下代碼，這個代碼的目的是讓webpack命令在執行的時候自動啟用默認的用戶設置
//導入path模塊，並取名為path
var path=require("path")
module.exports={
//使用開發模式打包，這是4.x新加入的，否則會出現黃色警告
mode:"development",
//定義webpack執行時候的入口文件
//__dirname變量獲取當前模塊文件所在目錄的完整絕對路徑
entry:path.join(__dirname,"./src/main.js"),
output:{
//定義輸出文件路徑
path:path.join(__dirname,"./dist"),
//定義輸出文件名
filename:"bundle.js"
}
}
12.現在可以直接使用webpack命令打包了，該命令在執行時會首先加載webpack.config.js文件中的配置來執行
13.上述配置完成后，依然不夠智能，因為每次修改完代碼都需要使用webpack命令重新打包，所以需要用到webpack-dev-server這個web前端服務器來輔助我們webpack自動執行。
執行npm install webpack-dev-server安裝
14.webpack-dev-server安裝完成后，我們在package.json文件下的"scripts"對象里，新增一個名為"dev"的屬性，值是"webpack-dev-server"
15.接下來我們可以直接使用npm run dev命令來啟動 webpack-dev-server這個web前端服務器。不出意外的果然報錯了。
錯誤信息：Error: Cannot find module 'webpack'
16.這個錯誤的原因是，除了安裝全局webpack，當前項目下還要安裝一個webpack，執行命令【npm install webpack -D】在當前項目下安裝webpack
17.再次執行npm run dev依舊報錯
錯誤信息：Error: Cannot find module 'webpack-cli/bin/config-yargs'
是因為在當前項目安裝webpack之后，還需要在當前項目下安裝webpack-cli
18.接下來在當前項目下安裝webpack-cli，執行命令【npm install webpack-cli -D】
19.再次執行【npm run dev】，總算成功了
21.在package.json文件夾修改webpack-dev-server的參數
22.添加如下代碼：之后執行 npm run dev啟動服務
main.js
//定義JS函數
function changeBgColor()
{
document.getElementById("app").style.backgroundColor="#ddd";
}
//提升js函數到windows級別，如果不提升，會提示找不到
window.changeBgColor=changeBgColor
index.html
<!-- 自定義代碼注釋 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NCK測試VUE模板</title>
<!-- 這里使用的是/bundle.js 而不是../dist/bundle.js 是因為webpack-dev-server會在當前項目根目錄下在內存里生成一個bundle.js文件 -->
<script src="/bundle.js"></script>
</head>
<body>
<div id="app">
<input type="button" onclick="changeBgColor();" value="點擊我改變div顏色"/>
<h1>dsfsd</h1>
</div>
</body>
</html>
23.修改main.js里的背景顏色，ctrl+s，再點擊按鈕顏色會自動改變，證明webpack項目構建成功。
接下來配置webpack打包css樣式文件
24.根目錄下新建css文件夾，文件夾下新建index.css文件
25.main.js中增加代碼
26.用webpack打包會提示錯誤信息，Module not found: Error: Can't resolve，因為webpack默認只能打包js文件，需要打包css文件需要增加第三方loader插件
27.執行npm install style-loader css-loader -D 安裝style-loader和css-loader兩個插件
28.在webpack.config.js增加module節點，該規則會從右往左執行，先執行css-loader，再執行 sytle-loader
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader']}
]
}
29.再次執行webpack命令，發現已經可以通過了
30.執行npm run dev，樣式設置成功
