webpackJsonp未定义：webpack-dev-server和CommonsChunkPlugin [英] webpackJsonp is not defined: webpack-dev-server and CommonsChunkPlugin

问题描述

这是我的webpack.config.js文件：

This is my webpack.config.js file:

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)
  ]
};

这是我运行webpack-dev-server的脚本：

And this is my scripts that runs the webpack-dev-server:

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');

webpack 命令输出正常（捆绑）然而，.js和vendor.bundle.js），dev服务器失败， webpackJsonp未定义（尽管其内存中编译成功）。

The webpack command output is good (bundle.js and vendor.bundle.js), however, the dev server fails with webpackJsonp is not defined (although its in-memory compilation succeeded).

从webpack.config.js中删除 CommonsChunkPlugin 时 - 一切正常：

When removing CommonsChunkPlugin from webpack.config.js - it all works fine:

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

任何想法？

推荐答案

在 index.html 文件中，只需调用 vendor.bundle.js 之前 bundle.js

In your index.html file just call vendor.bundle.js before bundle.js

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

这就是全部，现在应该有效。 更多信息。

That's all, now it should work. More information.

这篇关于webpackJsonp未定义：webpack-dev-server和CommonsChunkPlugin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！