Question

我正在使用Webpack + React，而且我正在使用CommonsChunkPlugin。事情是，即使我没有把它放在供应商的反应中，反应仍然有效。条目（与其他包相同）。这有意义吗？

我的配置如下：

config.entry.vendors = ['mobx', 'jquery', 'highcharts', 'react-highcharts', 'moment', 'numeral', 'jquery-ui', 'jquery.cookie', 'lodash', 'jquery.waitforimages', 'raven-js'];

config.module.loaders = config.module.loaders.concat([
  {
    test  : /\.less$/,
    loader: ExtractTextPlugin.extract({
      fallback: "style-loader",
      loader  : "css-loader?sourceMap!postcss-loader!less-loader?sourceMap"
    })
  }
]);

config.plugins = config.plugins.concat([
  new ExtractTextPlugin('[name]-[chunkhash].min.css'),
  new webpack.optimize.UglifyJsPlugin({
    minimize  : true,
    mangle    : false, // { except: ['$super', '$', 'exports', 'require'] },
    compressor: {
      warnings : false,
      screw_ie8: true
    },
    sourceMap : true
  }),
  new StatsPlugin('webpack.stats.json', {
    source : false,
    modules: false
  }),
  new webpack.optimize.CommonsChunkPlugin({name: 'vendors', filename: 'vendors-[chunkhash].min.js'}),
  new WebpackMd5Hash(),
  new ManifestPlugin(),
  new InlineManifestWebpackPlugin({
    name: 'webpackManifest'
  })
]);

webpack的输出值为：

  output: {
    filename         : '[name].bundle.js',
    publicPath       : '/',
    path             : paths.dist,
    sourceMapFilename: "[name].js.map",
  },

Answer 1

CommonsChunkPlugin足够聪明，你没有为chunks指定CommonsChunkPlugin属性，这意味着插件会尝试浏览所有条目并将公共部分移动到< strong>供应商块然后进入供应商 - [chunkhash] .min.js 文件。

e.g。您有2个入口点：index.js，signin.js，并且您有下一个代码：

const React = require('react')
const ReactDOM = require('react-dom')

配置如

entry: {
    app: './index.js',
    signin: './signin.js',
    vendor: ['react']
},
*****
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
         name: 'vendor',
         filename: 'vendor-[chunkhash].js'
    })
]

您在供应商块中仍然会有react-dom。

另一方面，如果您有第三个入口点而不需要react-dom，则只有react将被移动到供应商块。

但即使在这种情况下，您仍会将react-dom包含在前两个条目块中。

当我没有把它放在供应商那里时，反应是有效的事情。条目（与其他包相同）。

因此，反应在任何情况下都会起作用，唯一的区别是，react块是否会被移动到vendors，如果没有，它仍将包含在您的入口点文件中。< / p>

希望它有所帮助。

Webpack - 即使它不在供应商的反应中也会起作用。

1 个答案: