webpackJsonp 未定义 - VueJS答案

【问题标题】：webpackJsonp is not defined - VueJSwebpackJsonp 未定义 - VueJS
【发布时间】：2016-08-08 07:26:17
【问题描述】：

我们正在开发一个大型应用程序，应用程序的一部分正在使用 vuejs，但由于某些原因，应用程序的这个 vuejs 部分不起作用，我们收到了这个错误：

Uncaught ReferenceError: webpackJsonp is not defined

我们的 webpack.config.js 文件，如下所示：

var webpack = require('webpack'),
    path    = require('path');

module.exports = {
  resolve: {
    modulesDirectories: ['./node_modules', './resources/assets/scripts']
  },

  entry: {
    // Commons and Libraries
    common: ['jquery', './resources/assets/scripts/main.js'],

    // Chunks per Page
    home: './resources/assets/scripts/home.js',
    blog: './resources/assets/scripts/blog.js',
    about: './resources/assets/scripts/about.js',
    contact: './resources/assets/scripts/contact.js',
    shop: './resources/assets/scripts/shop.js', // This is VueJS chunk
  },

  output: {
    path: path.join(__dirname, 'public/assets/js'),
    filename: '[name].min.js'
  },

  devtool: "source-map",

  module: {
    loaders: [
      {
        test:     /\.js$/,
        loader:   'babel-loader',
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      { test: /jquery\.js$/, loader: 'expose?$' },
      { test: /jquery\.js$/, loader: 'expose?jQuery' },
      {
        test: /\.(png|jpg)$/,
        loader: 'url',
        query: {
            // limit for base64 inlining in bytes
            limit: 10000,
            // custom naming format if file is larger than
            // the threshold
            name: '[name].[ext]?[hash]'
          },
        },
        {
      // Use SVG File loader
      test: /\.svg$/,
      loader: 'svg-url-loader'
    }
    ],
  },

  plugins: [
    new webpack.ResolverPlugin(
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("package.json", ["main"])
    ),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      minChunks: 2
    }),

    new webpack.optimize.UglifyJsPlugin({minimize: true, preserveComments: 'license'})
  ]
};

【问题讨论】：

标签： javascript webpack vue.js

【解决方案1】：

对您来说可能有点晚了，但根据 Webpack 论坛上的 this thread，您的条目中的这一行之间似乎存在冲突：

common: ['jquery', './resources/assets/scripts/main.js'],

还有这一行：

new webpack.optimize.CommonsChunkPlugin({
  name: 'common',
  minChunks: 2
}),

您实际上是在告诉 Webpack 创建两个名为 Common 的文件，因此它会产生冲突。您可以查看this comment 以获得更详细的说明。有太多特定于上下文的信息要复制>在此处粘贴详细信息，但该线程/评论中有一些很好的信息可以深入了解。

【讨论】：