2016-08-08 9 views
1

Wir arbeiten an einer großen App, und ein Teil der App verwendet die vuejs, aber aus bestimmten Gründen funktioniert dieser vuejs Teil der App nicht und wir haben diesen Fehler:webpackJsonp ist nicht definiert - VueJS

Uncaught ReferenceError: webpackJsonp is not defined

Unsere webpack.config.js Datei sieht wie folgt aus:

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

Antwort

0

Wahrscheinlich etwas für Sie zu spät, aber basierend auf this thread auf den Webpack Foren, es sieht aus wie ein Konflikt zwischen dieser Linie ist in Ihr Eintrag:

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

und diese Linie:

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

Sie Webpack im Wesentlichen sagen, zwei Dateien mit den Namen gemeinsam zu schaffen, so einen Konflikt es zu schaffen. Sie können this comment für eine detailliertere Erklärung sehen. Es gibt zu viele kontextspezifische Informationen zum Kopieren> fügen Sie die Details hier ein, aber dieser Thread/Kommentar enthält einige gute Informationen, um tiefer einzudringen.