寫(xiě)在前面：該部分的安裝都是基于windows系統(tǒng)的，且此處的webpack的版本為：webpack@3.6.0。
1.安裝webpack
1.1 安裝方法：
用win+R打開(kāi)運(yùn)行對(duì)話框，輸入cmd進(jìn)入命令行模式。然后找到你想開(kāi)始項(xiàng)目的地方，輸入下方代碼：
mkdir webpack3
cd webpack3
第一句是建立一個(gè)文件夾，第二句是進(jìn)入這個(gè)文件夾。這個(gè)文件夾就是我們的項(xiàng)目文件目錄了，文件夾建立好后，可以通過(guò)下面命令安裝webpack。
需要注意的是,你在執(zhí)行下一步時(shí)必須安裝node，可以通過(guò) node -v來(lái)查看node安裝情況和版本，如果沒(méi)有安裝，要先安裝node才可以繼續(xù)進(jìn)行。戳此查看安裝node.js
1.1.1 全局安裝
//全局安裝---主要命令行需要直接輸入webpack命令
npm install -g webpack
如果你這時(shí)安裝失敗了（出現(xiàn)了報(bào)錯(cuò)信息），一般有三種可能：
- 檢查你node的版本號(hào)，如果版本號(hào)過(guò)低，升級(jí)為最新版本。
- 網(wǎng)絡(luò)問(wèn)題，可以考慮使用cnpm來(lái)安裝（這個(gè)是淘寶實(shí)時(shí)更新的鏡像）,具體可以登錄cnpm的官方網(wǎng)站學(xué)習(xí)http://npm.taobao.org/。
- 權(quán)限問(wèn)題，在Liux、Mac安裝是需要權(quán)限，如果你是Windows系統(tǒng)，主要要使用以管理員方式安裝。
解決方法： windows 使用win+x,選擇命令提示符（管理員），在里面運(yùn)行命令就好了。
1.1.2 局部安裝
提示：全局安裝是可以的，但是webpack官方是不推薦的。這會(huì)將您項(xiàng)目中的 webpack 鎖定到指定版本，并且在使用不同的 webpack 版本的項(xiàng)目中，可能會(huì)導(dǎo)致構(gòu)建失敗。
那如果采用局部安裝那如何使用webpack的打包命令呢？可見(jiàn)直接使用webpack命令是行不通的了。我們可以通過(guò)相關(guān)配置使用npm來(lái)執(zhí)行。
(1)局部安裝
安裝到當(dāng)前項(xiàng)目的node_modules中。
npm install webpack --save-dev
(2)在package.json中配置命令。
"scripts": {
"partback": "webpack"
},
(3)運(yùn)行命令，打包
npm run partback
為此，局部打包成功。
1.2 項(xiàng)目目錄的安裝
全局安裝完成后，我們還要進(jìn)行一個(gè)項(xiàng)目目錄的安裝。在用npm安裝前，我們先要進(jìn)行一下初始化，初始化的主要目的是生成package.json文件（包含了各種模塊信息..）
a.初始化
在命令行輸入：
npm init -y
-y:表示package.json中的信息按默認(rèn)配置即可。
b.項(xiàng)目目錄的安裝
輸入下面命令進(jìn)行項(xiàng)目目錄的安裝：
//開(kāi)發(fā)環(huán)境需要
npm install --save-dev webpack
這里的參數(shù)–save是要保存到package.json中，dev是在開(kāi)發(fā)時(shí)使用這個(gè)包，而生產(chǎn)環(huán)境中不使用。
開(kāi)發(fā)環(huán)境：在開(kāi)發(fā)時(shí)需要的環(huán)境，這里指在開(kāi)發(fā)時(shí)需要依賴的包。
生產(chǎn)環(huán)境：程序開(kāi)發(fā)完成，開(kāi)始運(yùn)行后的環(huán)境，這里指要使項(xiàng)目運(yùn)行，所需要的依賴包。
--save-dev:意思是將模塊安裝到該項(xiàng)目目錄下，并在package文件的devDependencies節(jié)點(diǎn)寫(xiě)入依賴。
到此我們的webpack就安裝好了，如果我們想查看一下當(dāng)前安裝的webpack版本，我們可以輸入以下命令進(jìn)行查看：
webpack -v
我現(xiàn)在的版本是3.6.0版本，看到了版本號(hào)說(shuō)明安裝成功了
2.項(xiàng)目結(jié)構(gòu)建立
2.1 建立文件夾
在根目錄下建立兩個(gè)文件夾，分別是src文件夾和dist文件夾：
-src文件夾：用來(lái)存放我們編寫(xiě)的javascript代碼，可以簡(jiǎn)單的理解為用JavaScript編寫(xiě)的模塊。
-dist文件夾：用來(lái)存放供瀏覽器讀取的文件，這個(gè)是webpack打包成的文件。
也可以理解成src是源碼文件,用于開(kāi)發(fā)環(huán)境，dist是我們編譯打包好的文件，用于生產(chǎn)環(huán)境；
2.2 編寫(xiě)程序文件
文件夾建立好后，我們?cè)赿ist文件下手動(dòng)建立一個(gè)index.html文件，并寫(xiě)入下面的代碼。
/dist/index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack study</title>
</head>
<body>
<div id="title"></div>
<script src="./bundle.js"></script>
</body>
</html>
這里引入了一個(gè)JavaScript的bundle.js文件。這個(gè)文件現(xiàn)在還沒(méi)有，這是用webpack執(zhí)行打包命令后生產(chǎn)的文件。我們的index.html寫(xiě)好后，接下來(lái)在src文件夾下建立entery.js的文件，用于編寫(xiě)我們的JavaScript代碼，也是我們的入口文件。
src/entery.js:
document.getElementById('title').innerHTML='Hello Webpack';
2.3 使用webpack打包
在webstorm終端中執(zhí)行下面命令行，即可完成本次打包。使用方法如下:
webpack {entry file} {destination for bundled file}
注釋：
{entery file}:入口文件的路徑，本文中就是src/entery.js的路徑；
{destination for bundled file}:填寫(xiě)打包后存放的路徑。
注意：在命令行中是不需要寫(xiě){ }的。
本次使用的命令行為：
webpack src/entry.js dist/bundle.js
最終結(jié)果為：
2.4 安裝live-server
live-server是一個(gè)具有實(shí)時(shí)重載功能的小型開(kāi)發(fā)服務(wù)器。用它來(lái)熱加載HTML / JavaScript / CSS文件，但不能用于部署最終的網(wǎng)站系統(tǒng).
能給進(jìn)行到該步，說(shuō)明node.js是已經(jīng)安裝了的。現(xiàn)在我們?nèi)职惭blive-server（node.js和npm的依賴）,在webstorm終端進(jìn)行即可，命令如下：
npm install -g live-server
-g:表示全局安裝。
安裝成功后，我們?cè)趙ebstorm終端，cd到dist目錄下，執(zhí)行l(wèi)ive-server（開(kāi)啟服務(wù)器）會(huì)自動(dòng)打開(kāi)瀏覽器并執(zhí)行并渲染dist目錄下的index.html文件，命令分別如下：
cd dist
live-server
執(zhí)行的結(jié)果如下圖：
命令執(zhí)行成功后，會(huì)在dist目錄下出現(xiàn)bundle.js文件，這時(shí)我們的結(jié)果就在瀏覽器渲染了，網(wǎng)頁(yè)中顯示出了Hello webpack的信息。
