We are working on one large scale app, and one part of app is using the vuejs, but for some reasons, this vuejs part of app doesn't work and we got this error:
Uncaught ReferenceError: webpackJsonp is not defined
Our webpack.config.js file, looks like this:
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'})
]
};