web-dev-qa-db-ja.com

webpackJsonpが定義されていません：webpack-dev-serverおよびCommonsChunkPlugin

これは私の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()
  ]

何か案は？

javascriptwebpackcommonschunkplugin
8
Amit Kaspi

index.htmlファイルで、前にvendor.bundle.jsを呼び出すだけです。 bundle.js

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

これですべてです。これで機能するはずです。 詳細情報

15
Arnold Gandarillas

ベンダーのエントリポイントの名前を

'vendor.js'：['lodash']

1
Piyush.kapoor

概念を少し拡張するために、ランタイムがそこに含まれているため、ベンダーが最初に来る必要があります（すべてのWebパッキングのため、クライアントのロード時に実行されるすべての変数とメソッドを定義するすべてのもの）。

マニフェストファイルを使用する場合（チャンク化などの理由で）、モジュールの構築方法のためにランタイムが含まれるため、最初にマニフェストファイルを配置する必要があります。

0
subdigit