用于长期缓存的 Webpack 4 和散列答案

【问题标题】：Webpack 4 and Hashing for Long Term Caching用于长期缓存的 Webpack 4 和散列
【发布时间】：2018-09-19 08:18:50
【问题描述】：

我正在尝试向我的项目添加长期缓存。我使用的是 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';

新的输出是：

如您所见，供应商文件的哈希已更改。但是为什么会变呢？

我只将一个新的 scss 文件导入到我的条目 javascript 文件（app.js）中？这对我的供应商哈希有什么影响？

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

【问题讨论】：

这仍然是 webpack 中的一个开放 bug github.com/webpack/webpack/issues/1315

标签： node.js reactjs webpack

【解决方案1】：

正如lukas-reineke 已经建议的那样，GitHub 上有一个未解决的问题。但是有一个非常棒的中型Tim Sebastian关于这个话题：

Predictable long term caching with Webpack

【讨论】：