- Configured webpack to use contentHash in bundle file name
- This caused a problem with out script tag in index.html
- We installed HtmlWebpackPlugin to help us generate a new index.html
- It automatically includes the correct script tag at the bottom
- We created a template file that we passed in called template.html
- We deleted the original index.html because we don't need it anymore
- Make sure you are opening dist/index.html now to view the app
- Changed our main.css to main.scss
- Installed bootstrap locally so we can tweak it
- Installed sass-loader and node-sass
- Updated webpack.config file to include a .scss rule
- Installed style-loader and css-loader
- Configured webpack.config to use both loaders on css files
- Remember the order we use them in webpack.config matters
- We use import/export to indicate dependencies
- Webpack makes sure everything loads in the correct order
- We can remove all our additional script tags in index.html
- Installed webpack and webpack-cli
- Added a start script in package.json which calls webpack
- Made an index.js file, which is the file webpack looks for by default
- Webpack spits out our code in dist/main.js by default
- Currently our main app code has nothing to do with webpack, but it will soon
- Pre-webpack version of our simple app
- One app.js file with all the code
- Bootstrap included via CDS, no SASS or customization
- Single SVG included in assets folder