概念
打包后输出的文件名后缀,用于做版本管理
文件指纹类型
Hash:和整个项目的构建相关,只要项目文件有修改,整个项目构建的hash值就会更改。
//file-loader 的 name
loader:'file-loader',
options:{
name:'[name]_[hash:8].[ext]'
}
//结果
timg_2d92e401.jpeg
Chunkhash:和webpack打包的chunk有关,不同的entry会生成不同的chunkhash值。(不可以和webpack.HotModuleReplacementPlugin一起使用)
output:{
filename:'[name]_[chunkhash:8].js'
}
//结果
index_c4de272c.js
Contenthash:根据文件内容来定义hash,文件内容不变,contenthash不变。
plugins:[
new MiniCssExtractPlugin({
filename:"[name][contenthash:8].css" //将css提取成独立文件
})
]
由环境区分webpack配置文件
开发环境:webpack.dev.js
mode:'development',//开发环境
plugins:[
new webpack.HotModuleReplacementPlugin()
],
devServer:{
contentBase:'./dist',//服务的目录
hot:true // 是否开启热更新
}
"scripts": {
"dev": "webpack-dev-server --config webpack.dev.js --open"
}
生产环境:webpack.prod.js
mode:'production',//生产环境
"scripts": {
"build": "webpack --config webpack.prod.js",
}