- Extracted CSS into own file in production
- Minified CSS in production
- Added TerserJS back in to minify JS in production
- Minified HTML in production as well
- Now we have 2 entry files and 2 bundles
- The vendor file houses code that is less likely to change, 3rd party libraries
- The main file has all of our app code
- Added html-loader to automatically require the files we reference in img tags
- Added file-loader to handle the svg,png,jpg,gif files from our images
- Configured file-loader to add our images to an imgs directory in dist
- Also configured it to add a hash to their filenames
- Lastly, added clean-webpack-plugin to our production config to clean out the dist directory each time we build
- Broke our webpack.config file into 3 files
- webpack.common.js, webpack.dev.js, and webpack.prod.js
- installed webpack-merge to share the common functionality
- updated our package.json to use the new config files
- installed webpack-dev-server and added it to start script in package.json
