使用插件html-webpack-plugin 報錯 【Vue warn】: cannot find element: #app

說明：webpack: "^5.9.0",webpack-cli: "^4.2.0",html-webpack-plugin: "^4.5.0",

html頁面處理，這里借助html-webpack-plugin 插件來完成

const HtmlWebpackPlugin = require('html-webpack-plugin')
new HtmlWebpackPlugin() //在插件中配置

這樣配置后運行打包后的index.html頁面會出現如下的錯誤

打開打包好的html文件查看，可以看到確實沒有將index.html 里面的#app 這個元素打包過來。

這是因為HtmlWebpackPlugin 插件默認會生成自己的html模板。所以這里需要設置為我們自己模板。

如下圖打包前的index.html頁面需要兩個變量，之前未設置時，默認填充了htmlWebpackPlugin.options.title 這個變量為webpack app，下面設置下title屬性，及使用自己的模板。

new HtmlWebpackPlugin({
      title: 'Webpack Vue',
      template:'./public/index.html'
}),