node.js - Webpack 4 和用于长期缓存的哈希

Question

我正在尝试向我的项目添加长期缓存。我之前使用的是 CommonsChunkPlugin，但现在我正在尝试将我的项目迁移到 webpack 4？ 如您所知，CommosChunkPlugin 现在已随 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';

新的输出是:

如您所见， vendor 文件的哈希值已更改。 但为什么会改变呢？

我只将新的 scss 文件导入到我的入口 javascript 文件(app.js)中？这对我的 vendor 哈希有什么影响？

注意:TextArea.[chunkhash].js 是从动态导入加载的。但是我在这里询问了vendor.js。在这种情况下它并不是太重要。

Answer 1

如lukas-reineke已经建议，GitHub 上有一个 Unresolved 问题。 但有一个非常出色的中等形式Tim Sebastian关于此主题:

Predictable long term caching with Webpack