webpackJsonp 未定义：webpack-dev-server 和 CommonsChunkPlugin答案

【问题标题】：webpackJsonp is not defined: webpack-dev-server and CommonsChunkPluginwebpackJsonp 未定义：webpack-dev-server 和 CommonsChunkPlugin
【发布时间】：2016-10-27 20:19:08
【问题描述】：

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

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 的脚本：

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 命令输出很好（bundle.js 和 vendor.bundle.js），但是，开发服务器失败并显示webpackJsonp is not defined（尽管它的内存编译成功）。

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

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

有什么想法吗？

【问题讨论】：

你找到解决办法了吗？

标签： javascript webpack commonschunkplugin

【解决方案1】：

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

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

就是这样，现在应该可以了。 More information.

【讨论】：

【解决方案2】：

将供应商入口点重命名为

'vendor.js': ['lodash']

【讨论】：

它没有用。当我看到github.com/webpack/webpack/issues/368 时，我已经尝试过了。我还尝试将对象传递给 commonschunkplugin 插件（而不是 3 个参数...），但效果不佳... :(

【解决方案3】：

只是为了稍微扩展一下这个概念，供应商必须是第一位的，因为运行时包含在其中（所有定义所有变量和方法的东西都在客户端加载时运行，因为所有的 webpacking）。

如果您使用清单文件（由于分块等），则必须将其放在首位，因为模块的构建方式将包含运行时。

【讨论】：