在webpack.config.js中entry是唯一入口文件
entry也可以是一個數組
如果是一個數組,會將數組里面的文件一起打包到bundle.js
entry也可以是一個對象。
如果output里filename有三個值:
.[name]是文件名字是entry的鍵值。
.[hash]是md5加密的值。
.[chunkhash]這里是作為版本號使用。
每次修改文件,運行之后,都會生成不一樣的hash 於chunkhash值,方便上線時靜態資源的版本管理。
文件名如果每次運行都是變化的,文件引入的名字也需要變化,使用install html-webpack-plugin插件,安裝npm install html-webpack-plugin --save-dev
完成之后在webpack.config.js文件里面添加plugins鍵:
plugins的值是一個<strong>數組</strong>,里面的值都是 new htmlWebpackPlugin(),參數一個配置數組,如下:
- title: 用來生成頁面的 title 元素
- filename: 輸出的 HTML 文件名,默認是 index.html, 也可以直接配置帶有子目錄。
- template: 模板文件路徑,支持加載器,比如 html!./index.html
- inject: true | 'head' | 'body' | false ,注入所有的資源到特定的 template 或者 templateContent 中,如果設置為 true 或者 body,所有的 javascript 資源將被放置到 body 元素的底部,'head' 將放置到 head 元素中。
- favicon: 添加特定的 favicon 路徑到輸出的 HTML 文件中。
- minify: {} | false , 傳遞 html-minifier 選項給 minify 輸出
- hash: true | false, 如果為 true, 將添加一個唯一的 webpack 編譯 hash 到所有包含的腳本和 CSS 文件,對於解除 cache 很有用。
- cache: true | false,如果為 true, 這是默認值,僅僅在文件修改之后才會發布文件。
- showErrors: true | false, 如果為 true, 這是默認值,錯誤信息會寫入到 HTML 頁面中
- chunks: 允許只添加某些塊 (比如,僅僅 unit test 塊)
- chunksSortMode: 允許控制塊在添加到頁面之前的排序方式,支持的值:'none' | 'default' | {function}-default:'auto'
- excludeChunks: 允許跳過某些塊,(比如,跳過單元測試的塊)
最終生成