webpack文件指纹策略

概念

打包后输出的文件名后缀，用于做版本管理

文件指纹类型

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",
  }