1.首先建立一個webpack項目，然後新建文件demo2，在demo2下新建src文件，index.html文件，初始化項目 （npm init --yes）得到package.json

2.全局安裝webpack （npm install webpack -g）,在項目文件下本地安裝webpack（npm install webpack --save--dev）,

3.在src下面新建js文件，分別創建兩個js文件main.js和index.js 如下圖所示：

4.在demo2下創建webpack.dev.config.js配置文件，註意此時的入口文件有index.js,main.js兩個，要生成動態的index.html文件（即自動引入index.js和main.js）. 需要引入html-webpack-plugin插件，通過npm install html-webpack-plugin --save--dev 下載，具體代碼如下圖所示：

entry:表示入口文件 output:表示輸出文件 path表示路徑 __dirname表示當前webpack.dev.config.js的絕對路徑。filename表示文件名稱.filename支持4種動態起名字的方式( id, name, hash, chunkhash )

5.將package.json裏面的scirpt鍵對應的值改為：

{

"d" : "webpack --config webpack.dev.config.js --progress --display-modules --colors --display-reasons"

},

如下圖所示：

6.執行npm run d 可得如下結果：

index.html自動引入輸出的兩個js文件：

在瀏覽器打開便看到引入的js文件產生的效果。

webpack學習（一）