的WebPack - 缓存清除使用自动版本与哈希值

我一直在试图为周获得缓存无效用的WebPack工作，通过posts，documentation浇筑，每添加插件的文件，但我不能图如何得到它的权利。我想用哈希值，而不是使用查询参数清除快取。这是我目前的配置 - 一切评论W/*意味着它是纯粹列入的缓存清除的缘故：的WebPack - 缓存清除使用自动版本与哈希值

var path = require('path'); 
var webpack = require('webpack'); 
var AssetsPlugin = require('assets-webpack-plugin'); // * 
var HtmlWebpackPlugin = require('html-webpack-plugin'); // * 
var WebpackMd5Hash = require('webpack-md5-hash'); // * 


var basePlugins = [ 
    new webpack.DefinePlugin({ 
    __PRODUCTION__: true, 
    'process.env.NODE_ENV': JSON.stringify('production'), 
    }), 
]; 

var usedPlugins = [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ 
    compressor: { 
     warnings: false, 
    }, 
    }), 
    new webpack.optimize.CommonsChunkPlugin({ // * 
    names: "manifest" // * 
    }), // * 
    new AssetsPlugin(), // * 
    new HtmlWebpackPlugin(), // * 
    new WebpackMd5Hash(), // * 
]; 


/* Config */ 
module.exports = { 
    entry: { 
    main: [path.join(__dirname, '/lib/main')], 
    }, 
    eslint: { 
    configFile: 'lib/.eslintrc', 
    }, 
    resolve: { 
    root: path.resolve(__dirname, 'lib'), 
    alias: { 
     ... // a bunch of aliases 
    }, 
    }, 
    output: { 
    path: path.join(__dirname, '/pub/'), 
    filename: '[name].[chunkhash].js', // * 
    chunkFilename: '[name].[chunkhash].js', // * 
    sourceMapFilename: '[name].js.map', 
    publicPath: '/pub/', 
    }, 
    plugins: usedPlugins, 
    module: { 
    preLoaders: [ 
     ... // some preloaders 
    ], 
    loaders: [ 
     ... // some loaders 
    ], 
    }, 
};

当我建立这个生产，prodBuild/pub文件夹下，我得到3个文件：

main.[someHashHereButWithoutTheBrackets].js
manifest.[someOtherHashHereAndAlsoWithoutTheBrackets].js
index.html

的index.htmlpub下产生即使有一个index.html下prodBuild，这是提供给客户端的HTML页面。

所以文件结构看起来是这样的：

/prodBuild 
    /pub 
     main.[someHashHereButWithoutTheBrackets].js 
     manifest.[someOtherHashHereAndAlsoWithoutTheBrackets].js 
     index.html // call this indexB 
    /anotherFolder1 
    ... 
    /anotherFolderK 
    index.html // call this indexA

同样，没有任何这种企图在缓存清除，indexA是什么是提供给客户端。在这里面有一些脚本标签，如：

<script src="pub/main.js></script> // in indexA

然而，在indexB，不仅有其他失踪html标签，但我只得到两个脚本标记：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>My Broken Webpack App</title> 
    </head> 
    <body> 
    <script type="text/javascript" src="/pub/manifest.[someOtherHashHereAndAlsoWithoutTheBrackets].js"></script><script type="text/javascript" src="/pub/main.[someHashHereButWithoutTheBrackets].js"></script></body> 
</html>

因此，尽管它出现散列工作（这就是我想要的），还有几个问题：

哈希不会出现在正确的index.html文件，即它在显示出来，不indexA。
indexB只包含indexA中的两个脚本。
在indexB中，有很多html标记丢失，但存在于indexA。

回顾一下，我需要的是缓存清除，使用上面描述的散列类型。我并不精通的WebPack，但我会假设是最终的结果是indexA是完全一样的，除了与文件名散列。

需要采取哪些措施来获得缓存清除工作正常？

UPDATE： 托马斯引用了我的意思不是哈希标签。我的意思是哈希值，正如我在我的文章已经描述了。

来源

2017-01-21 JumboMumbo

Webpack哈希不直观。散列是在编译步骤的中间计算的，这意味着在计算散列后可以执行一些步骤，可以改变输出文件的内容。为了得到真正的输出散列，你可以使用'webpack-plugin-hash-output' –

-5

我想使用散列缓存，而不使用查询参数。

不能使用散列作为缓存驱动程序。这是因为他们所代表的。

散列表示相同页面上的不同段落/段落。而查询表示具有动态内容的页面的配置版本。像分页或搜索结果等...

这就是为什么哈希不起作用。对于浏览器来说，禁用哈希缓存没有明显的理由，但是如果查询的页面被缓存，它可能会产生错误的结果。或者至少如果不同的查询将被缓存视为相同的页面。

要禁用缓存，您可以使用查询或http标头，如Cache-Control。

这里的东西Caching

来源

2017-01-22 08:49:25 Thomas

我想你已经混淆了hashtags和hash值。请参阅我的更新。 – JumboMumbo

的WebPack - 缓存清除使用自动版本与哈希值

回答

相关问题