一、問題描述

在使用webpack-dev-server時，出現如圖錯誤：

我的配置檔案如圖：

package.json檔案如圖：

二、方案一、直接將index.html檔案放入dist中

我看的webpack3.x視訊中，老師直接將index.html檔案放入dist中，同樣能夠生成首頁。

如圖：

生成如下頁面：

三、方案二，使用HtmlWebpackPlugin外掛生成首頁

因為出錯，所以百度的時候找到了第二種解決方案，即用HtmlWebpackPlugin外掛生成首頁，去官網瞅了一眼，貌似官網也是用的這個外掛，所以就瞭解了一下。

首先，需要用如下命令安裝外掛， cnpm i -D html-webpack-plugin,

然後修改配置檔案如圖：

注意，最後別忘了在外掛中生成例項並引用，

最後的結果與放在dist下是一樣的，當然，因為用inject注入了打包的js檔案，所以不用在html模板中引用js檔案了，

如圖：

這裡是沒用<script>標籤引入打包後的js檔案的！

最後，我用的編輯器是VScode,老師推薦的，還不錯，至少很流暢！！！