webpackJsonp ist nicht definiert: webpack-dev-Server und CommonsChunkPlugin

Question

Dies ist meine webpack.config.js Datei:

const webpack = require('webpack'); 
const path = require('path'); 

module.exports = { 
    cache: true, 
    devtool: 'source-map', 
    entry: { 
    app : [ 
     './src/index.js' 
    ], 
    vendor: ['lodash'] 
    }, 
    output: { 
    filename: 'bundle.js', 
    path: path.join(__dirname, 'dist'), 
    publicPath: '/dist/', 
    pathinfo: true 
    }, 
    module: { 
    loaders: [ 
     { test: /\.js$/, exclude: /node_modules/, loaders: ['babel'] }, 
     { test: /\.scss/, exclude: /node_modules/, loaders: ['style', 'css', 'sass'] } 
    ] 
    }, 
    plugins: [ 
    new webpack.NoErrorsPlugin(), 
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js', Infinity) 
    ] 
}; 

Und das ist meine Skripte, die die webpack-dev-Server läuft:

const webpack =require('webpack'); 
const WebpackDevServer = require('webpack-dev-server'); 
const webpackConfig = require('../webpack.config'); 
const _ = require('lodash'); 

const webpackDevConfig = _.cloneDeep(webpackConfig); 
const devPort = 3000; 

webpackDevConfig.entry.app.unshift('webpack/hot/dev-server'); 
webpackDevConfig.entry.app.unshift('webpack-dev-server/client?http://localhost:' + devPort + '/'); 
webpackDevConfig.plugins.push(new webpack.HotModuleReplacementPlugin()); 

new WebpackDevServer(webpack(webpackDevConfig), { 
    publicPath: webpackConfig.output.publicPath, 
    hot: true, 
    stats: { 
    colors: true, 
    chunks: false 
    } 
}).listen(devPort, 'localhost'); 

Die Ausgabe des Befehls webpack ist gut (bundle.js und vendor.bundle.js), der Dev-Server schlägt jedoch mit webpackJsonp is not defined fehl (obwohl die Kompilierung im Speicher erfolgreich war).

Wenn CommonsChunkPlugin von webpack.config.js entfernen - es ist alles funktioniert gut:

... 
entry: [ 
    './src/index.js' 
    ], 
... 
plugins: [ 
    new webpack.NoErrorsPlugin() 
    ] 

Irgendwelche Ideen?

Answer 1

Rename Anbieter Einstiegspunkt zu

'vendor.js': [ 'lodash']

Answer 2

In Ihrem index.html Datei rufen Sie einfach vendor.bundle.js vor bundle.js

<script src="assets/js/vendor.bundle.js"></script> 
<script src="assets/js/bundle.js"></script> 

das ist alles, jetzt sollte es funktionieren.

Answer 3

Um ein wenig auf das Konzept zu erweitern, muss der Anbieter zuerst kommen, da die Laufzeit darin enthalten ist (alles, was alle Variablen und Methoden während der Ladezeit des Clients wegen des gesamten Webpackings definiert).

Wenn Sie eine Manifestdatei verwenden (wegen Chunking usw.), müssen Sie diese zuerst angeben, da sie dann die Laufzeit enthält, da das Modul erstellt wird.