1、关于打包文件的命名:
output:{
path:path.resolve(__dirname,'dist'),
filename:'js/[name]-[hash].js'
}
output 中的filename
(1) [name]
(2)[hash] 本次打包生成的哈希值
(3)[chunkname] 打包时每一个文件的哈希值
2、html 中对打包后的js文件的引用
按照以下配置,在每次打包后,都会使HTML引用最新的打包好的js文件
plugins:[
new htmlWebpackPlugin()
]
3、template
在上一点中,每次打包后实际上会新生成一个HTML文件,对打包后的js的引用实际上是基于新的HTML文件而不是我们自己写的HTML文件,所以基于以上配置,可以扩展配置。
(1)template参数 ,以当前根目录下的index,HTML为模板生成新的HTML
新的HTML既包含我们自己写的内容,也包含打包好的js引用
(2)inject:将script引用放到head标签中。
plugins:[
new htmlWebpackPlugin({
filename:'index-[hash].html',
template:'index.html',
inject:'head'
})
]
4、输出打包文件 存放指定文件夹
效果是将输出的JS文件放到dist /js路径下 ,生成的html则在dist目录下
output:{
path:path.resolve(__dirname,'dist'),
filename:'js/[name]-[hash].js' // name 前加个'js/' 指定其路径
}
今天就学习了这么多。进度比较慢。