为什么拆分应用程序和供应商 js 代码在 webpack 中失败并做出反应答案

【问题标题】：why split app and vendor js code fails in webpack & react为什么拆分应用程序和供应商 js 代码在 webpack 中失败并做出反应
【发布时间】：2016-01-15 08:05:27
【问题描述】：

我的 app.js 需要做出反应。我按照以下说明拆分应用程序和响应代码：https://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code。

不幸的是，webpack 生成了 app.bundle.js 和 vendor.bundle.js；两者都包含 react.js 库，这是不需要的。

根据上面的链接，我希望 webpack 生成一个小的 app.bundle.js（不包含 react）和一个大的 vendor.js（包含 react）。

我的 webpack 配置文件：

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: {
    app: "./app.js",
    vendors: ['react']
  },
  output: {
    filename: '[name].bundle.js' // Notice we use a variable
  },
  plugin: [
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendors", /* filename= */"vendor.js")
  ],
  module: {
    preLoaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'source-map'
      }
    ],
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loaders: [
          'react-hot',
          'babel?presets[]=stage-0,presets[]=react,presets[]=es2015'
        ]
      }
    ]
  }
};

我的 app.js 文件：

// Import React and JS
var React = require('react')

React.render(
  React.createElement('h1', null, 'Hello, world!'),
  document.getElementById('example')
);

非常感谢任何建议。

【问题讨论】：

您的具体问题是什么？您提供了一些配置、代码......和？
感谢您的评论，我刚刚编辑了问题以便澄清。
在 'entry' 配置中尝试使用 'vendor' 而不是 'vendors'
谢谢。我试过供应商，直到现在还没有运气。 webpack 给了我类似的结果：大 app.bundle.js 和 vendor.bundle.js..

标签： reactjs webpack

【解决方案1】：

    plugins: [
new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendors", /* filename= */"vendor.js")
]

使用插件，而不是插件。

【讨论】：