To set things up for asset management configurations in your project, we need to prepare our project index and a configuration file by performing the following steps:
- Begin by making a minor change to the example project using the dist/index.html file, as follows:
<!doctype html>
<html>
<head>
<title>Asset Management</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>
- Now, using webpack.config.js, write the following content:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
The preceding two code blocks simply show a placeholder index file that we will use to experiment with asset management. The latter code block shows a standard configuration file, with the index file set as the first entry point and names for the output bundle set. This will prepare our project for bundling once we are done with our asset management experiment.
Your project will now be set up for asset management configurations. This guide will now show you how to load CSS files.