Konfigurieren Sie Webpack für React, um mehrere Einträge und Ausgaben zu verwenden

Question

Ich versuche, den Server zu konfigurieren, mehrere Einträge und Ausgänge zu haben. Die App verwendet Zurb Foundation, Jquery und React.

Ich möchte Jquery und Fundament nicht Teil der bundle.js und auch ein separates Paket haben zu sein für

Webpack validiert, Server startet reagieren, aber nichts ist Show und in der Konsole angezeigt: „Reference: webpackJsonp ist nicht definiert "

Mit einem einzigen Eintrag funktioniert, ich weiß nicht, war der Fehler beim Versuch, mehrere zu verwenden.

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"] 
} 

Answer 1

eine Ausgabe angeben für jeden Eintrag:

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

Wenn Sie jquery und Fundament hinzuzufügen Bibliotheken direkt in den HTML fügen Sie einfach nicht die Einträge wollen. schriftart: https://webpack.github.io/docs/multiple-entry-points.html