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';

新输出是：

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

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

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

Answer 1

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

Predictable long term caching with Webpack

Webpack 4和Hashing for Long Term Caching

1 个答案: