WebPACKのマニフェストハッシュ - ベンダーが

Question

をハッシュ化されていない私はhereチュートリアルに従い、このmedium blog上、それはbundle-18734678.jsとvendor-32422342.jsようなものですので、その出力は常にハッシュ化されますされています - 私のバンドルがハッシュ化されたが、何らかの理由でベンダーがハッシュされません。まったく。下の画像はちょうどvendor.jsです。

マイWebPACKのファイルは以下の通りです。

const path = require('path'); 
const webpack = require('webpack'); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
const CompressionPlugin = require("compression-webpack-plugin"); 
const ManifestPlugin = require('webpack-manifest-plugin'); 
const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin'); 

const vendorPackages = [ 
    'react', 
    'react-router', 
    'react-redux', 
    'toastr', 
    'lodash' 
]; 

module.exports = { 
    entry: { 
    bundle: [ './src/index.js' ], 
    vendor: vendorPackages 
    }, 

    output: { 
    path: path.join(__dirname, '/dist/prod'), 
    publicPath: '/dist/prod', 
    filename: '[name]-[chunkhash:8].js' 
    }, 

    plugins: [ 
     new webpack.DefinePlugin({ 
     'process.env': { 
      NODE_ENV: JSON.stringify('production') 
     } 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor', 
     filename: 'vendor.js', 
     minChunks: Infinity, 
     }), 

     new ManifestPlugin({ 
     fileName: 'app-manifest.json', 
     basePath: '/' 
     }), 
     new ChunkManifestPlugin({ 
     filename: "manifest.json", 
     manifestVariable: "webpackManifest" 
     }), 
     new ExtractTextPlugin("styles.css"), 
     new webpack.optimize.DedupePlugin(), 
     new CompressionPlugin({ 
      asset: "[path].gz[query]", 
      algorithm: "gzip", 
      test: /\.js$|\.html$/, 
      threshold: 10240, 
      minRatio: 0.8 
     }) 
    ], 

    module: { 
    rules: [ 
     // Test: js & jsx 
     { 
     test: /\.js(x?)$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015', 'stage-1'] 
     } 
     }, 
     // Test: html 
     { 
     test: "\.html$", 

     use: [ 
      { 
      loader: "html-loader", 
      options: { 
       /* ... */ 
      } 
      } 
     ] 
     }, 
     { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }, 
     // Test: css 
     { 
     test: /\.css$/, 
     exclude: /node_modules/, 
     loader: 'style-loader!css-loader?localIdentName=[name]__[local]__[hash:base64:5]&modules&importLoaders=1&sourceMap', 
     }, 
     // Test: url 
     { 
     test: /\.(jpe?g|gif|png|svg)$/i, 
     loader: 'url-loader?limit=10000', 
     }, 
     // Test: json 
     { 
     test: /\.json$/, 
     loader: 'json-loader', 
     } 
    ] 
    } 
} 

Answer 1

をご確認ください。そのファイル名オプションを削除するか、値をハッシュで設定します。

new webpack.optimize.CommonsChunkPlugin({ 
    name: 'vendor', 
    filename: 'vendor.js', // <==== 
    minChunks: Infinity, 
}), 

Answer 2

あなたはただあなたが 'vendor.js' にあなたのファイルに名前を付けるためにwebpack.optimize.CommonsChunkPluginのオプションがありthis.

const vendorPackages = [ 
    'jquery', 
    'lodash', 
    'fetch', 
    'es6-promise' 
]; 
const webpackConfig = { 
    entry: { 
     bundle: './src/client/index.js', 
     vendor: vendorPackages 
    } 
    //... 
}