下面是案例目錄:
wepack.config.js部分選項;
說一說webpack-html-plugin的用處;他就是一個html文件生成器;
title是生成的html文件中的title標題;
template是模板,意思是根據哪個.html文件來生成;
inject是生成html文件的時候要不要把模板中的的html引入的js也一起帶進去;默認是true的;
data是自定義的屬性,在頁面中也可以取到;
nimify是壓縮,也沒什么;它當中有兩個選項,去掉注釋去掉空行,當然還有其他的選項;
webpack 熱更新(即不需要刷新瀏覽器的情況下,數據變化了頁面自動變化) 選項:注意了,
先描述一下我的踩到的一些坑.........
原本以為把源文件.的html(只限html文件)編譯的html分開放[即源文件放在src,編譯的放在dist目錄下,-上面這個就是的;]可以更加區分;
嗯哼,哪知道contentBase這種寫法它只認"./dist"目錄(也就是說網站跟目錄就是只能是它);太沒趣了;所以npm start (在package.json中配置) 之后再瀏覽器打開看不到那個html頁面引入的js;
於是又看到了另一種寫法,contentBase: path.join(__dirname, "../webpack-demo4/"), ../ 這種也是絕對路徑,因為__dirname是webpack.config.js所在的絕對路徑;意思是我把dist的父級目錄作為網站的根節點; ok 瀏覽器沒有出現js找不到的404了;瞬間覺得還行;
其實問題來了;根本就實現不了熱更新....最后還是把src中的源文件移動到dist目錄下面把,稍微更改一下webpack.config.js中的路徑; (over)