使用webpack的CommonsChunkPlugin插件给react打包出错？

Question

webpack.config.js配置文件

项目js文件

编译的时候出错

html文件调用

页面报错

Answer 1

没加入jsx的解析loader吧，给你看一下我的配置文件吧

var path = require('path');
var webpack = require('webpack');
const node_modules_dir = path.resolve(__dirname, 'node_modules');

var config = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://0.0.0.0:9100',
    'webpack/hot/dev-server',
    './src/relax/js/tabs.js'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'entry.js',
    publicPath: '/deploy/'
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
    compress: {
        warnings:false
    },
    output: {
        comments: false
    }
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [
    {
        test: /\.css$/,
        loader: 'style!css?module&localIdentName=[hash:base64:5]&-url'
    },
    {
        test: /\.less$/,
        loader: 'style!less'
    },
    {
        test: /\.sass$/,
        loader: 'style!sass'
    },
    {
      test: /\.jsx?$/,
      loaders: ['react-hot', 'babel'],
      exclude: [node_modules_dir],
      include: path.join(__dirname, 'src')
    },
    {
        test: /\.(png|jpg)$/,
        exclude: [node_modules_dir],
        loader: 'url?limit=6400'
    }
    ]
  },
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    stats: "error-only",
    host:'0.0.0.0',
    port: 9100
  }
};

module.exports = config

Answer 2

命名有点不规范，导致引入react出错了，你的CommonsChunkPlugin用的不对

entry: {
    index: './index',
    vendor: ['react']
}
还有
new webpack.optimize.CommonsChunkPlugin({
  name: ['vendor'],
  minChunks: Infinity,
  filename: 'common.js'
})

<script src='path to ur common.js'></script>