Question

我已经尝试了几周让缓存破坏与Webpack一起工作，通过posts，documentation和每个添加的插件的文档，但我不能弄清楚如何做到正确。我想使用哈希缓存，而不是使用查询参数。这是我当前的配置 - 所有注释的所有内容都带有*，这意味着它仅仅是为了缓存破坏而被包含在内：

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.html下的pub生成，即使 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文件中，即它显示在indexB中，而不是indexA。
indexB仅包含indexA中的两个脚本。
在indexB中，有许多html标记缺失，但存在于indexA中。

总结一下，我需要的是缓存破坏，使用上面描述的散列类型。我对webpack并不熟悉，但我认为最终结果是indexA完全相同，除了文件名上有哈希值。

需要采取哪些措施才能让缓存无法正常运行？

更新我并不是指Thomas引用的标签。我的意思是哈希值，正如我在帖子中描述的那样。

Answer 1

我想使用哈希缓存 - 而不使用查询参数。

您不能将哈希用作缓存破坏程序。这是因为他们所代表的。

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

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

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

Caching

上的内容

Webpack - 使用哈希值自动版本控制缓存

1 个答案: