External libraries are added using NPM, just like with CLI-based projects. However, in order for files to be included in bundles, external libraries must be referenced in JS files, because Webpack determines what must be included in bundles by analyzing the import
statements of every JS module in the application.
You can see an example of this by checking the skeleton's main
module:
src/main.js
// we want font-awesome to load as soon as possible to show the fa-spinner import '../styles/styles.css'; import 'font-awesome/css/font-awesome.css'; import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap'; //Omitted snippet...
In the skeleton's sample application, all global resources such as the application's stylesheet, Font Awesome, Bootstrap's stylesheet, and the Bootstrap JS file are imported in the main.js
file. These imports will tell Webpack to include these resources in the application bundle. Additionally, Webpack is smart enough to analyze CSS files for their dependencies. This means it knows how to handle imported CSS files, images, and font files.