Question

我遇到了为显式供应商块维护稳定模块ID的问题。这是我的设置（以SurviveJS为模型）：

const gitrev = require('git-rev-sync');
const path = require('path');
const webpack = require('webpack');
const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');

const packageJson = require('./package.json');

const gulpPaths = require('./gulp/lib/gulp_paths');

module.exports = {
  context: __dirname,
  entry: {
    vendor: Object.keys(packageJson.dependencies),
    web: path.join(
      __dirname,
      gulpPaths.SCRIPT_SOURCE_DIR,
      gulpPaths.SCRIPT_BUNDLE_SOURCE_FILE
    ),
//    server: path.join(
//      __dirname,
//      gulpPaths.SCRIPT_SOURCE_DIR,
//      gulpPaths.SCRIPT_SERVER_SIDE_SOURCE_FILE
//    ),
  },
  output: {
    path: path.join(__dirname, gulpPaths.SCRIPT_OUTPUT_DIR),
    filename: '[name]_bundle.js',
  },
  plugins: [
    new webpack.DefinePlugin({
      __DEV__: false,
      __TEST__: false,
      __COMMIT__: JSON.stringify(gitrev.long()),
      'process.env': {
        NODE_ENV: JSON.stringify('production'),
      },
    }),
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest'],
      minChunks: Infinity,
    }),
    new webpack.optimize.UglifyJsPlugin(),
  ],
  resolve: {
    extensions: ['', '.js', '.jsx'],
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loaders: ['babel'],
        exclude: /node_modules/,
      },
      { // Turn off AMD module loading on eventemitter2
        test: /eventemitter2/,
        loader: 'imports?define=>false',
      }
    ]
  },
};

效果很好;我可以来回浏览我的存储库历史记录，只有当供应商库在node_modules中实际更改时，才会更改供应商块。但是，一旦我取消注释其他入口点，一切都会更改：供应商块更改而不对供应商库进行任何更改。如果我只手动将几个库列入白名单，这会有所帮助，但不能完全解决问题。看起来它与DedupePlugin和OccurenceOrderPlugin也有相同的冲突。

我还尝试使用Webpack文档中概述的方法（recordsPath和ChunkManifestPlugin，但没有运气）。

我不会将头发分开，因为服务器入口点无论如何都是服务器端呈现中的失败实验，应该可以删除;但是，很快我就会有多个入口点，以便更好地调整页面加载时间，并且它可能会变得有趣。

Answer 1

根据JuhoVepsäläinen的建议，对我来说最好的选择是使用NamedModulesPlugin。为了记录，HashModuleIds插件也值得一看，但它仅在Webpack 2中可用。

如何正确使用Webpack的CommonsChunkPlugin与多个入口点？

1 个答案: