初識 Webpack (三) 功能講解（配置文件可生成bundle.js的四種方式）

目錄

➣ 基本配置

➣ 輸出文件名稱配置

㊫ 配置文件生成bundle.js四大實戰

➊ [name].bundle.js

➋ [id].bundle.js

➌ [name].[hash].bundle.js(修改生新，無法緩存利用)

➍ [chunkhash].bundle.js（特定修改文件，生新，未修改仍然使用緩存中hash名稱）

✔ index.[chunkhash:8].js （字符串和hash截取）

✔ [id].chunk.js?[hash:8]（一共8位）

​➣ 總結

---

• ➣ 基本配置

模板	描述
[hash]	模塊標識符(module identifier)的 hash
[chunkhash]	chunk 內容的 hash
[name]	模塊名稱
[id]	模塊標識符(module identifier)
[query]	模塊的 query，例如，文件名 ? 後面的字符串
[function]	方法，可以返回一個filename字符串

• ➣ 輸出文件名稱配置

Webpack 通過output中配置filename屬性不同格式，可以生成唯一的bundle文件名：

• ㊫ 配置文件生成bundle.js四大實戰

1. 1 創建文件demo1
2. 1 項目初始化npm init（注意默認不填寫任何東西（pic））
3. 1 ./demo1/webpack.config.js內容

<!--./app/webpack.config.js配置文件-->
module.exports = {
	entry:__dirname+"/app/main.js",
	output:{
		path:__dirname+"/dist",
		filename:"bundle.js"
	}
}


<!--./demo1/app/main.js配-->
var mymodule = require("./mymodule")
mymodule.sayHello();




<!--./demo1/app/mymodule.js配-->
module.exports = {
	sayHello:function(){
		console.log("hello world");
	}
}

➊ [name].bundle.js

➋ [id].bundle.js

➌ [name].[hash].bundle.js(修改生新，無法緩存利用)

➍ [chunkhash].bundle.js（特定修改文件，生新，未修改仍然使用緩存中hash名稱）

✔ index.[chunkhash:8].js （字符串和hash截取）

✔ [id].chunk.js?[hash:8]（一共8位）

➣ 總結

1. 根據入口文件，添加name；
2. 根據構建構成，添加hash；
3. 根據對應的依賴文件，添加chunkhash；