Currently, my Angular application is compiled into a single bundle using Webpack, including all dependencies and app code in one file. I am trying to split this code into two separate bundles: one for dependencies and one for application code.
In my webpack.config.js file, I have the following setup:
var webpack = require('webpack');
var path = require('path');
var definePlugin = new webpack.DefinePlugin({
'process.env': {
NODE_ENV: `"${process.env.NODE_ENV}"`
}
});
var SRC = path.resolve(__dirname, 'src/main/client');
var APP = path.resolve(SRC, 'app/index.js');
var DEST = path.resolve(__dirname, 'target/webapp/dist');
module.exports = {
entry: {
vendor: [
'angular',
'angular-animate',
'moment',
'angular-moment',
'angular-translate',
'angular-ui-bootstrap',
'angular-ui-router',
'lodash'
],
app: APP
},
plugins: [
new webpack.ProvidePlugin({
_: 'lodash',
angular: 'angular',
angularMoment: 'angular-moment',
angularTranslate: 'angular-translate',
moment: 'moment',
ngAnimate: 'angular-animate',
uibootstrap: 'angular-ui-bootstrap',
uirouter: 'angular-ui-router'
}),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
definePlugin
],
output: {
path: DEST,
filename: 'bundle.js',
publicPath: '/',
hash: true
},
module: {
preLoaders: [],
loaders: [
{ test: /\.html$/, loaders: ['html'] },
{ test: /\.css$/, loaders: ['style', 'css'] },
{ test: /\.scss$/, loaders: ['style', 'css', 'sass'] },
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loaders: ['ng-annotate', 'babel?presets[]=es2015', 'eslint']
},
{
test: /\.(ttf|eot|svg|woff2?)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file'
}
]
},
sassLoader: {
includePaths: [path.resolve(__dirname, './node_modules')]
}
};
After splitting the code into two bundles, one for dependencies and one for application code, I encountered an issue when trying to load the application. I received an error message stating:
Uncaught TypeError: angular.module is not a functionangular-moment.js file within the vendor.bundle.js. It seems that the angular dependency is not accessible to other modules loaded in the vendor.bundle.js file. I am unsure how to resolve this issue and make these dependencies visible to each other.