Presently, our AngularJS project relies on Bower for front-end dependencies and the bower-concat Grunt task to merge bower_components into a single libraries.js file. Similarly, we assemble library CSS files into a libraries.css.
Looking ahead, we aim to transition to using NPM and Webpack. Initially, we intend to utilize Webpack solely to generate a vendor bundle, replacing the current libraries.js file. We also plan to employ Webpack for bundling vendor CSS files while maintaining Grunt's concat task for application logic and CSS. The goal is to minimize changes to existing application code during this transition.
To achieve this, I relocated all dependencies from bower.json to
package.json</code, ensuring version numbers and package names were correct, and subsequently created an <code>index.jsThe current configuration of my webpack.config.js is 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: [
'style-loader',
'css-loader'
]
}
]
},
optimization: {
splitChunks: {
chunks: 'all'
}
}
};
This setup generates both a main.bundle.js and a main~vendor.bundle.js, but integrating these files into our HTML template results in an immediate console error:
Uncaught ReferenceError: angular is not defined
Researching the issue yielded limited results, as most resources presume a complete migration to Webpack.
In essence, my query is whether it is possible to create ONLY a vendor bundle using Webpack that can be included in a Thymeleaf-style HTML file, and if so, how?