We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
webpack的指纹策略是通过给文件加上hash后缀,做到当代码有修改时打包出来的文件后缀也会修改,从而可以把静态资源开启持久缓存,这样每次有更新的代码打包后生成的都是新的问题件,从而最大程度上使用缓存。
webpack
hash
webpack提供了三种hash类似
Hash
Chunkhash
Contenthash
和整个项目构建相关,只要一个文件有修改,整个项目的hash值就会改变。 例如
// webpack.prod.js entry: { index: "./src/index", search: "./src/search" }, output: { path: path.join(__dirname, "dist"), filename: "[name]_[hash:8].js", publicPath: "./dist" }
它的问题是当项目有多入口或者使用code spliting,只要有一个文件修改打包的生成的js代码hash都会改变。不利于缓存。
code spliting
js
模块的hash,根据模块的修改才改变对应的hash值。 根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk,生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开,单独打包构建,接着我们采用chunkhash的方式生成哈希值,那么只要我们不改动公共库的代码,就可以保证其哈希值不会受影响
chunk
chunkhash
output: { path: path.resolve(__dirname, 'dist'), filename: '[name]_[chunkhash:8].js' },
根据文件内容来定义hash,文件内容不变,则contenthash不变。 某个页面既有js资源,又有css资源。如果css资源也使用Chunkhash。如果修改了js。由于css资源使用了Chunkhash,就会导致css内容没有变化,发布上线的文件却发生了变化。因此,通常对css资源使用Contenthash。这个时候可以使用mini-css-extract-plugin里的contenthash值,保证即使css文件所处的模块里就算其他文件内容改变,只要css文件内容不变,那么不会重复构建
contenthash
css
mini-css-extract-plugin
module.exports = { entry: { app: './src/app.js', search: './src/search.js' }, output: { filename: '[name][chunkhash:8].js', path: __dirname + '/dist' }, plugins: [ new MiniCssExtractPlugin({ filename: `[name][contenthash:8].css` }), ] };
设置file-loader(或url-loader) 的name,使用[hash] 图片,字体文件的hash和css/js资源的hash概念不一样,图片,字体文件的hash是由内容决定的
file-loader(或url-loader)
name
[hash]
css/js
{ test: /\.(png|svg|jpg|gif)$/, use: [{ loader: 'file-loader', options: { // [ext] 资源后缀名 name: 'img/[name][hash:8].[ext] ' } }] }
The text was updated successfully, but these errors were encountered:
No branches or pull requests
概述
webpack
的指纹策略是通过给文件加上hash
后缀,做到当代码有修改时打包出来的文件后缀也会修改,从而可以把静态资源开启持久缓存,这样每次有更新的代码打包后生成的都是新的问题件,从而最大程度上使用缓存。文件指纹类型
webpack
提供了三种hash
类似Hash
Chunkhash
Contenthash
hash
和整个项目构建相关,只要一个文件有修改,整个项目的hash值就会改变。
例如
它的问题是当项目有多入口或者使用
code spliting
,只要有一个文件修改打包的生成的js
代码hash
都会改变。不利于缓存。chunkhash
模块的
hash
,根据模块的修改才改变对应的hash
值。根据不同的入口文件(Entry)进行依赖文件解析、构建对应的
chunk
,生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开,单独打包构建,接着我们采用chunkhash
的方式生成哈希值,那么只要我们不改动公共库的代码,就可以保证其哈希值不会受影响contenthash
根据文件内容来定义
hash
,文件内容不变,则contenthash
不变。某个页面既有
js
资源,又有css
资源。如果css
资源也使用Chunkhash
。如果修改了js
。由于css
资源使用了Chunkhash
,就会导致css
内容没有变化,发布上线的文件却发生了变化。因此,通常对css资源使用Contenthash
。这个时候可以使用mini-css-extract-plugin
里的contenthash
值,保证即使css
文件所处的模块里就算其他文件内容改变,只要css
文件内容不变,那么不会重复构建图片,字体文件的文件指纹设置
设置
file-loader(或url-loader)
的name
,使用[hash]
图片,字体文件的
hash
和css/js
资源的hash
概念不一样,图片,字体文件的hash
是由内容决定的参考文献
The text was updated successfully, but these errors were encountered: