清除外掛和重新生成HTML模板出現的問題
阿新 • • 發佈：2020-10-23
webpack安裝clean-webpack-plugin 和html-webpack-plugin 是為了重新生成打包的bundle之後清空以前的的bundle之後建立一個新的html檔案並將新的bundle插入到HTML中
但是在這個過程中出現一個問題，我建立的HTML模板中，含有id= ‘app’，但是生成的新的HTML這行程式碼沒有了。
HTML模板：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack搭建</title> </head> <body> <div id="root"></div></body> </html>
webpack配置：
plugins:[
// 清空直接打包好的bundle檔案
new CleanWebpackPlugin(),
// 重新構建html模板
new HtmlWebpackPlugin({
title: 'index檔案',
filename:'index.html',
template: './index.html'
}) ,
]
新生成的HTML模板：缺少我設定的<div id="root"></div>
解決辦法：更換清除模板和建立模板的位置
plugins:[
// 重新構建html模板
new HtmlWebpackPlugin({
title: 'index檔案',
filename:'index.html',
template: './index.html'
}) ,
// 清空直接打包好的bundle檔案 ------ 清除模板放到下面
new CleanWebpackPlugin(),
],
具體為什麼會出現這個原因，我還沒有了解清除。會繼續追蹤這個問題的。