Configure webpack for React to use multuple entries and outputs

Question

I'm trying to config the server to have multiple entries and outputs. The app is using Zurb Foundation,jquery and React.

I want jquery and foundation not to be part of the bundle.js and also to have a separate bundle for react

Webpack validates, server starts but nothing is show and in console appears: "ReferenceError: webpackJsonp is not defined"

With a single entry is working, I don't know were is the error when trying to use multiple ones.

webpack.config

var webpack = require('webpack');
var path = require('path');
var CommonsChunkPlugin = require('./node_modules/webpack/lib/optimize/CommonsChunkPlugin');

module.exports = {
    entry: {
        main: ['script!jquery/dist/jquery.min.js',
        'script!foundation-sites/dist/foundation.min.js',
        './dist/app.js' ],
        react: ['react', 'react-dom']
    },
     externals: {
        jquery: 'jQuery'
    },
    plugins: [
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery'
        }),
        new CommonsChunkPlugin('react', 'react.bundle.js')
    ],
    output: {
        filename: bundle.js'
        },

    devServer: {

        inline: true,
        contentBase: './build',
        port: 3000
    },

    module: {
        loaders: [
          {
            loader: 'babel-loader',
            query: {
              presets: ['react', 'es2015']
            },
            test: /\.js?$/,
            exclude: /(node_modules)/
          }
        ]
    }
};

package.json

{
  "name": "boilerplate",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server",
    "test": "karma start"
  },
  "author": "CBM",
  "license": "MIT",
  "dependencies": {
    "react": "^15.3.2",
    "react-dom": "^15.3.2"
  },
  "devDependencies": {
    "babel-core": "^6.16.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.25.0",
    "foundation-sites": "^6.2.3",
    "jquery": "^3.1.1",
    "karma": "^1.3.0",
    "karma-firefox-launcher": "^1.0.0",
    "karma-mocha": "^1.2.0",
    "karma-mocha-reporter": "^2.2.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.8.0",
    "mocha": "^3.1.0",
    "react-router": "^2.8.1",
    "script-loader": "^0.7.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.1"
  }
}

babel.rc

{
    "presets": ["es2015", "react"]
}

OriolBG · Accepted Answer · 2016-10-01 14:26:23Z

1

Specify an output for each entry:

entry: {
    jquery: ['script!jquery/dist/jquery.min.js', 'script!foundation-sites/dist/foundation.min.js' ],
    bundle: './dist/app.js',
    react: ['react', 'react-dom']
},
output: {
    filename: '[name].js'
}

If you want to add jquery and foundation libraries directly to the html just don't add the entries. font: https://webpack.github.io/docs/multiple-entry-points.html

answered Oct 1, 2016 at 14:26

OriolBG

2,0472 gold badges18 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Configure webpack for React to use multuple entries and outputs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related