Webpack 4和哈希用于长期缓存

Question

我正在尝试为我的项目添加长期缓存。我之前使用的是CommonsChunkPlugin，但现在我正在尝试将项目迁移到webpack 4。正如你所知，CommossChunkPlugin在webpack 4中已经停用。 因此，我决定尝试splitchunks优化，但我遇到了一些问题。 以下是我的配置文件。

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HashedModuleIdsPlugin = require("webpack-hashed-module-id-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

const merge = require('webpack-merge');
const common = require('./webpack.common.config.js');
const webpack=  require('webpack');
var path = require("path");

module.exports = merge(common,{
    entry: {
        main: './src/app.js',
        vendor: ['react','react-dom','redux-thunk']
    },
    output: {
      path: path.resolve(__dirname, "dist"),
      filename:"[name].[chunkhash].bundle.js",
      chunkFilename:"[name].[chunkhash].chunk.js"

    },
    //devtool:'source-map',
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.scss$/, 
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']              
            }
        ]
    },
    optimization: {

      splitChunks: {
        cacheGroups: {
          vendors: {
            chunks: 'all',
            name: 'vendor',
            test: 'vendor',
            enforce: true
          }
        }
      },
       runtimeChunk: 'single'
    },
    plugins: [
        new webpack.HashedModuleIdsPlugin({
            // Options...
        }),
        new MiniCssExtractPlugin({
          filename: "[name].[contenthash].css",
           chunkFilename: "[name].[contenthash].chunk.css"

       }),
        new webpack.DefinePlugin({
          'process.env':{
            'NODE_ENV': JSON.stringify('production')        
          }
       })


       /*,
        new webpack.SourceMapDevToolPlugin({
          filename: '[name].js.map',
          exclude: 'vendor'
       })*/
    ]
});

输出结果如下：

如果我将一个新的 scss 文件导入到 app.js 文件中。

import './app.scss';

新的输出结果为: 正如您所见，供应商文件的哈希值已更改。 但为什么会改变呢？ 我只是将一个新的scss文件导入到我的入口javascript文件(app.js)中？这对我的供应商哈希值有何影响？ 注意：TextArea. [chunkhash].js是从动态导入中加载的。但我在这里询问vendor.js。在这种情况下，它并不是太重要。

- javauser35

---

这仍然是webpack中的一个未解决的bug https://github.com/webpack/webpack/issues/1315 - lukas-reineke

Answer 1

正如lukas-reineke 已经建议的那样，GitHub 上有一个未解决的问题。 但是关于这个主题，Tim Sebastian 在 Medium 上有一篇非常好的文章:

使用 Webpack 进行可预测的长期缓存

- oliverwebr