第一句忠告：千萬不要下載最新的webpack 可以在npm下載時候加上版本號
比如：npm install --save-dev webpack@xxx -g?
首先是現(xiàn)在全局安裝 webpack? （安裝命令中有 -g 就是全局安裝）
另外 全局安裝請進入到桌面
然后在到項目中安裝??
以下是我 用的版本號
上面圖片 script 中 可以設(shè)置 npm中相應(yīng)的快捷鍵
比如 wpw ： webpack --watch?
正常情況下?你需要在命令行中輸入webpack --watch 才能運行
現(xiàn)在只需要 npm run wpw? 就可以了
先來實現(xiàn)一個demo? ?
首先新建一個文件夾 demo??然后npm init 以下 就會得到一個package.json的文件
這個文件中有你依賴的所有文件的名字已經(jīng)版本號 就是我上面那個截圖
然后 npm install webpack@xxx 記得帶上版本號? 你可以通過查看package.json 查看版本號
在demo中創(chuàng)建兩個文件夾 src dist
src中是放源碼的
dist一般是放你編譯過后的代碼的
src 中touch 一個 app.js? 寫一句代碼 console.log（‘hello word’）
回到 demo目錄 運行：webpack ./src/app.js? ./dist/app.bundle.js? 前面的是源碼地址 后面的時候你想輸入的地址已經(jīng)文件名
如果沒報錯 并且 dist 出現(xiàn)了一個 app.bundle.js就說明成功了
那么我們不可能每次文件改動都需要重新運行下把 太麻煩了
我們可以通過?webpack ./src/app.js? ./dist/app.bundle.js --watch 命令 來監(jiān)控文件
如果文件改動改動 就自動更新? 在監(jiān)控中的時候 如果你需要用命令行的話你必須重新打開一個窗口
接下來 為了方便使用 來創(chuàng)建下配置文件
在demo目錄中創(chuàng)建一個webpack-config.js的文件
寫上下面這些內(nèi)容
entry： 表示輸入? 在這里設(shè)置源碼的地址
output：表示輸入 在這里設(shè)置把文件輸出到那個目錄 以及文件名
這樣設(shè)置之后 我們在app.js中更新內(nèi)容后 直接 在命令行中輸入 webpack 就可以運行了
結(jié)合上面的快捷鍵 我們現(xiàn)在 直接輸入 npm run wpw? 就能監(jiān)聽文件 保持隨時更新了
下一步我們要 編譯html 文件
先下一個插件 ：html-webpack-plugin? 進入官網(wǎng)查看下載方法 同樣的要注意版本號
可以在 package.json 中查看是否下載成功
然后修改下配置文件 webpack.config.js
因為 path中以及添加了/dist 的前綴 所以 filename中只要填文件名就行
之后 我們在src中創(chuàng)建一個 html文件 index.html? 然后運行 npm run wpw??
dist中就會生成 一個index.html的文件 并且自動引入了 app.bundle.js
