webpack的設定檔詳解

這篇文章主要介紹了webpack的設定檔entry與output，小編覺得蠻不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

本文介紹了webpack的設定檔entry與output，分享給大家，如下：

在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的值是個陣列，裡面的值都是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: 允許跳過某些區塊，(例如，跳過單元測試的區塊)
  

#最終產生

以上是webpack的設定檔詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！