vineeth123-png
commented
8 months ago This short article and video demonstrate how to install html-webpack-plugin and set different options on it (note that you do not need to include some of the options mentioned as they are already the default settings if you leave them out). Whilst the written instructions do not show any code unlike the video, any options would be set just like the template option example shown above.
This [tutorial](https://webpack.js.org/guides/output-management/) on output management also gives an example of using html-webpack-plugin but does not demonstrate using the template option. It also starts by demonstrating how to configure multiple entry points - you are unlikely to need this feature for the projects in this part of the course.The first part of this tutorial (up until “Choosing a Development Tool”) talks about source maps, a handy way to track down which source file (index.js, a.js, b.js) an error is coming from when you use webpack to bundle them together. This is essential to debugging bundled code in your browser’s DevTools. If the error comes from b.js the error will reference that file instead of the bundle. It also walks through an example of the --watch feature and webpack-dev-server package, either of which will prove invaluable when working with webpack.
Note that if you decide to use webpack-dev-server, the tutorial example sets it to serve from dist. If you are using html-webpack-plugin, you will want to change this to serve from src instead. This will make development much easier as all of your work and any file paths you use can be kept within src (Webpack will adjust all of these file paths when bundling if you set the correct loaders and asset rules).
You can ignore the last option on webpack-dev-middleware as we will not be working with our own Express server for this part of the course.Setting our webpack configuration to development mode is naturally most suitable for our development work, but when we come to build our projects for deployment (production), the dedicated production mode optimises this for us. Instead of manually switching between modes in the configuration file as needed, this tutorial introduces webpack-merge. This can be quite useful as a quick setup can allow us to have a dedicated npm script for development builds/dev server, and another specifically for our production build.
You’ll notice the above tutorial does not have a webpack.config.js file. If you do use webpack-merge, make sure that any webpack commands you run (including in an npm script) follow the tutorial and use the --config option to specify which webpack configuration file to use. If you do not specify one, webpack will try to look for webpack.config.js and if it does not find one, it will not be able to bundle correctly!You don’t need to do the rest of the webpack tutorials at this time, but take a look at what’s offered on the sidebar of their guides page. There are several sweet features that you may want to use in future projects such as code-splitting, lazy-loading, and tree-shaking, so being aware of some of these features can come in handy. Now that you have a handle on webpack’s configuration system adding these features is as easy as using the right plugins and loaders!
npm has a library, that auto creates a html file and loads a js file given as input in config file.