Multiple Bundles With Gulp, WebPack, and React

A.markdown

Multiple Bundles With Gulp, WebPack, and React

gulpfile.coffee

gulp        = require 'gulp'
assign      = require 'object.assign'
webpack     = require 'webpack'

webpackConf = require './webpack.config.base'

runWebPack = (entries, config, done) ->
  config = assign({entry: entries}, config, webpackConf)

  webpack(config).run (err, stats) ->
    if err
      console.log 'Error', err
    else
      console.log stats.toString({ chunks: false })
      done()
    return





#*------------------------------------*\
#     $SCRIPTS
#*------------------------------------*/
gulp.task 'scripts',  (done) ->
  # entries compile to [name].bundle.js
  entries =
    "main": "./main.js"

  runWebPack(entries, {}, done)

package.json

{
  ...,
  "devDependencies": {
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "coffee-script": "~1.10.0",
    "gulp": "~3.9.0",
    "happypack": "^1.1.3",
    "jsx-loader": "^0.13.2",
    "object.assign": "^4.0.3",
    "webpack": "^1.12.12"
  },
  ...
}

webpack.config.base.coffee

HappyPack = require 'happypack'
path      = require 'path'

module.exports =
  output:
    path: path.join(__dirname, 'dist')
    filename: './[name].bundle.js'

  module:
    loaders: [
      {
        test: /\.jsx?$/
        exclude: /node_modules/
        loader: 'happypack/loader'
      }
    ]

  devtool: 'source-map'

  # don't bundle with React, use React global
  externals:
    'react': 'React'

  plugins: [
    new HappyPack({
      loaders: [{
        path: path.resolve(__dirname, 'node_modules/babel-loader/index.js'),
        query: '?presets[]=es2015,presets[]=react'
      }]
    })
  ]