webpackJsonp未定义:webpack-dev-server和CommonsChunkPlugin

时间:2016-06-25 08:25:48

标签: javascript webpack commonschunkplugin

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

 $('#feed > .feed-item').slice(-1 * arr[0]).fadeOut(1000, function(){
                    $(this).remove();
                });

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

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

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'); 命令输出正常(bundle.js和vendor.bundle.js),但是,dev服务器失败并显示webpack(尽管其内存中编译成功)。

从webpack.config.js中删除webpackJsonp is not defined时 - 一切正常:

CommonsChunkPlugin

有什么想法吗?

3 个答案:

答案 0 :(得分:15)

index.html 文件中,只需在 bundle.js

之前调用 vendor.bundle.js
<script src="assets/js/vendor.bundle.js"></script>
<script src="assets/js/bundle.js"></script>

这就是全部,现在它应该有效。 More information.

答案 1 :(得分:1)

将供应商入口点重命名为

'vendor.js':['lodash']

答案 2 :(得分:0)

为了扩展这个概念,供应商必须先来,因为运行时包含在那里(因为所有的webpacking,所有定义了在客户端加载期间运行的所有变量和方法)。

如果您使用清单文件(因为分块等),您必须首先放置它,因为它将包含运行时,因为模块的构建方式。