第一句忠告：千萬不要下載最新的webpack 可以在npm下載時(shí)候加上版本號(hào)

比如：npm install --save-dev webpack@xxx -g?

首先是現(xiàn)在全局安裝 webpack? （安裝命令中有 -g 就是全局安裝）

另外 全局安裝請(qǐng)進(jìn)入到桌面

然后在到項(xiàng)目中安裝??

以下是我 用的版本號(hào)

上面圖片 script 中 可以設(shè)置 npm中相應(yīng)的快捷鍵

比如 wpw ： webpack --watch?

正常情況下?你需要在命令行中輸入webpack --watch 才能運(yùn)行

現(xiàn)在只需要 npm run wpw? 就可以了

先來實(shí)現(xiàn)一個(gè)demo? ?

首先新建一個(gè)文件夾 demo??然后npm init 以下 就會(huì)得到一個(gè)package.json的文件

這個(gè)文件中有你依賴的所有文件的名字已經(jīng)版本號(hào) 就是我上面那個(gè)截圖

然后 npm install webpack@xxx 記得帶上版本號(hào)? 你可以通過查看package.json 查看版本號(hào)

在demo中創(chuàng)建兩個(gè)文件夾 src dist

src中是放源碼的

dist一般是放你編譯過后的代碼的

src 中touch 一個(gè) app.js? 寫一句代碼 console.log（‘hello word’）

回到 demo目錄 運(yùn)行：webpack ./src/app.js? ./dist/app.bundle.js? 前面的是源碼地址 后面的時(shí)候你想輸入的地址已經(jīng)文件名

如果沒報(bào)錯(cuò) 并且 dist 出現(xiàn)了一個(gè) app.bundle.js就說明成功了

那么我們不可能每次文件改動(dòng)都需要重新運(yùn)行下把 太麻煩了

我們可以通過?webpack ./src/app.js? ./dist/app.bundle.js --watch 命令 來監(jiān)控文件

如果文件改動(dòng)改動(dòng) 就自動(dòng)更新? 在監(jiān)控中的時(shí)候 如果你需要用命令行的話你必須重新打開一個(gè)窗口

接下來 為了方便使用 來創(chuàng)建下配置文件

在demo目錄中創(chuàng)建一個(gè)webpack-config.js的文件

寫上下面這些內(nèi)容

entry： 表示輸入? 在這里設(shè)置源碼的地址

output：表示輸入 在這里設(shè)置把文件輸出到那個(gè)目錄 以及文件名

這樣設(shè)置之后 我們?cè)赼pp.js中更新內(nèi)容后 直接 在命令行中輸入 webpack 就可以運(yùn)行了

結(jié)合上面的快捷鍵 我們現(xiàn)在 直接輸入 npm run wpw? 就能監(jiān)聽文件 保持隨時(shí)更新了

下一步我們要 編譯html 文件

先下一個(gè)插件 ：html-webpack-plugin? 進(jìn)入官網(wǎng)查看下載方法 同樣的要注意版本號(hào)

可以在 package.json 中查看是否下載成功

然后修改下配置文件 webpack.config.js

因?yàn)?path中以及添加了/dist 的前綴 所以 filename中只要填文件名就行

之后 我們?cè)趕rc中創(chuàng)建一個(gè) html文件 index.html? 然后運(yùn)行 npm run wpw??

dist中就會(huì)生成 一個(gè)index.html的文件 并且自動(dòng)引入了 app.bundle.js