Ad

Why Split App And Vendor Js Code Fails In Webpack & React

- 1 answer

My app.js requires react. I am following the following instructions to split the app and react code: https://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code.

Unfortunately, webpack generate app.bundle.js and vendors.bundle.js; both contains react.js library, which is not desired.

I am expecting webpack to generate a small app.bundle.js(which does not contains react) and a large vendor.js(which contains react), according to the link post above.

My webpack configure file:

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'
        ]
      }
    ]
  }
};

My app.js file:

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

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

Any suggestion is highly appreciated.

Ad

Answer

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

Use plugins, not plugin.

Ad
source: stackoverflow.com
Ad