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

目录

➣ 输出文件名称配置

㊫ 配置文件生成bundle.js四大实战

➊ [name].bundle.js

➋ [id].bundle.js

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

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

​➣ 总结

---

• ➣ 输出文件名称配置

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名称）

➣ 总结

1. 根据入口文件，添加name；
2. 根据构建构成，添加hash；
3. 根据对应的依赖文件，添加chunkhash；