Webpack Manifest Hashing - 供应商没有被哈希

时间:2016-12-25 09:29:09

标签: javascript reactjs webpack

我一直在关注教程heremedium blog,并且他们的输出总是被哈希,所以它就像bundle-18734678.jsvendor-32422342.js - 我的包被哈希但是对于某些供应商根本没有得到散列的原因。下图仅显示vendor.js

enter image description here

我的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',
      }
    ]
  }
}

2 个答案:

答案 0 :(得分:2)

您可以使用webpack.optimize.CommonsChunkPlugin选项将文件命名为&vendor; js'。删除该文件名选项或使用哈希值设置值:

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

答案 1 :(得分:0)

您只需查看this.

即可
[{'date': datetime.datetime(2016, 12, 25, 5, 0, 17, tzinfo=tzutc()), 'snap_id': 'snap-05a8e27b15161d5'}