Using Webpack to only generate a vendor bundle

Currently, we use Bower for the front-end dependencies of our AngularJS project and the bower-concat Grunt task to compile our bower_components into a libraries.js file. In a similar manner, we bundle the library CSS files into a libraries.css.

Looking towards the future, we want to switch to using NPM and Webpack. Preferably, we’d initially like to use Webpack to only create a vendor bundle, which would then replace our libraries.js file. We’d also like to use Webpack to bundle our vendor CSS files. For the time being, we’d like to keep on using Grunt’s regular concat task for out application logic and CSS. Essentially, we wish to touch as little application code as possible in this switch.

I’ve attempted to do this by moving all my dependencies from bower.json to package.json and fixing the version numbers and package names where needed, and then creating an index.js file in which I import all the dependencies.

My webpack.config.js currently looks as follows:

const path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'src/main/webapp/app/js')
    module: {
        rules: [
                test: //.css$/,
                use: [
    optimization: {
        splitChunks: {
            chunks: 'all'

This code does create both a main.bundle.js and a main~vendor.bundle.js file, but including the files in our HTML template and booting up the application immediately leads to an error in the console:

Uncaught ReferenceError: angular is not defined

Googling the issue returns few results, since all posts on the subject assume a complete switch to Webpack.

Ultimately, my question boils down to ‘Can you use Webpack to create ONLY a vendor bundle, which can then be included in a Thymeleaf-style HTML file and if so, how?’

Source: New feed
Source Url Using Webpack to only generate a vendor bundle