mac*_*ost 20 javascript browser-cache webpack
在Webpack之前,我总是依赖于以下模式来进行"缓存清除":
<script src="foo.js?cacheBust=12345" />
哪个12345是服务器在每个构建时为我生成的标记(它可能是Git哈希,尽管在我的情况下它不是).
有了Webpack,我现在有两个文件:build.js和chunk.1.js.由于我使用正常的脚本标记带来第一个,我可以使用上面的模式:
<script src="build.js?cacheBust=12345" />
但是,此时build.js会进行提取chunk.1.js,并且当它执行时,它不包括缓存无效的后缀.
我想让Webpack自动附加?cacheBust=12345,但我不知道12345构建时的部分,所以我不能把它包含在我的webpack.config.相反,我必须等到HTML页面被评估,此时我从服务器获取令牌.
所以,我的问题是,有没有办法让Webpack查看用于获取初始文件的参数(例如.?cacheBust=12345)并在获取其他文件时附加相同的参数？
Eve*_*tss 37
如果您想以" webpack方式" 实现缓存清除:
将输出文件名更改为哈希生成的名称(在构建阶段)
output: {
path: '/',
filename: '[hash].js',
chunkFilename: '[chunkhash].js',
},
从那时起,您foo.js和chunk.1.js将被称为e883ce503b831d4dde09.js和f900ab84da3ad9bd39cc.js.值得一提的是,这些文件的生成通常与制作和时间过于更新有关cacheBust.
从现在起你的foo.js主文件以不知名的方式命名.要提取此文件名,您可以使用AssetsPlugin
const AssetsPlugin = require('assets-webpack-plugin');
const assetsPluginInstance = new AssetsPlugin();
并添加此插件 webpack.config.js
plugins: [
assetsPluginInstance
]
在webpack-assets.json文件中你应该看到类似的东西
{
"main": {
"js": "/e883ce503b831d4dde09.js"
}
}
您可以使用此文件指向主.js文件.有关详细信息,请阅读此答案
我想如果你因修改chunk.2.js文件而进行应用程序生产,则可以更改文件路径
- build.js?cacheBust=12345
- chunk.1.js?cacheBust=12345
- chunk.2.js?cacheBust=12345
- chunk.2.js?cacheBust=12345
新的
- build.js?cacheBust=12346 // modified referation to chunk.2.js file
- chunk.1.js?cacheBust=12346
- chunk.2.js?cacheBust=12346 // modified
- chunk.2.js?cacheBust=12346
如果您使用上述解决方案,您将获得免费缓存确定.现在filles将被称为
(上一个产品)
- e883ce503b831d4dde09.js
- f900ab84da3ad9bd39cc.js
- 5015cc82c7831915903f.js
- 8b6de52a46dd942a63a7.js
(新产品)
- c56322911935a8c9af13.js // modified referation to chunk.2.js file
- f900ab84da3ad9bd39cc.js
- cd2229826373edd7f3bc.js // modified
- 8b6de52a46dd942a63a7.js
现在,只有 main file和chunk.2.js名称被改变,你会得到这个免费使用的WebPack方式.
您可以在此处阅读有关长期缓存的更多信息https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31
Viz*_*ler 13
你可以这么做
output: {
filename: '[name].js?t=' + new Date().getTime(),
chunkFilename: '[name]-chunk.js?t=' + new Date().getTime(),
publicPath: './',
path: path.resolve(__dirname, 'deploymentPackage')
}
您可以使用HtmlWebpackPlugin
来自webpack.js.org/plugins/html-webpack-plugin的描述：
...插件可简化HTML文件的创建，以服务于您的Webpack捆绑包。这对于Webpack捆绑包特别有用，该捆绑包的文件名中包含哈希值，该哈希值会更改每次编译 ...
我的webpack.config.js的一部分：
// ...
const HtmlWebpackPlugin = require('html-webpack-plugin');
// ...
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
template: './assets/index.html',
hash: true,
}),
// ...
]
};
如果这样，hash: true则将唯一的webpack编译哈希值附加到所有包含的脚本和CSS文件中。这对于缓存清除很有用。
更多关于HtmlWebpackPlugin 选项上github.com/jantimon/html-webpack-plugin
多亏了这个选项，我得到了带有以下内容的输出html文件：
<!DOCTYPE html>
<html>
<head>
<!-- ... rest of my head code ... -->
<link href="./css/styles.css?f42fdf96e2f7f678f9da" rel="stylesheet">
</head>
<body>
<!-- ... rest of my body code ... -->
<script type="text/javascript" src="./js/index.bundle.js?f42fdf96e2f7f678f9da"></script>
</body>
</html>
我项目的源代码：github.com/cichy380/html-starter-bs4-webpack
| 归档时间： |
|
| 查看次数： |
12996 次 |
| 最近记录： |