Webpack 5.4.0 compiled successfully in 2189 ms Let's see what happens when we do an npm run build.
This means that it will replace our index.html file with a newly generated one. + const HtmlWebpackPlugin = require('html-webpack-plugin') īefore we do a build, you should know that the HtmlWebpackPlugin by default will generate its own index.html file, even though we already have one in the dist/ folder.
Setting up HtmlWebpackPluginįirst install the plugin and adjust the file: npm install -save-dev html-webpack-plugin Let's fix that with the HtmlWebpackPlugin. if you open index.html in your browser, you can see what happens when you click the button.īut what would happen if we changed the name of one of our entry points, or even added a new one? The generated bundles would be renamed on a build, but our index.html file would still reference the old names. We can see that webpack generates our and files, which we also specified in our index.html file. Webpack 5.4.0 compiled successfully in 1996 ms Īsset 69.5 KiB (name: index ) 1 related assetĪsset 316 bytes (name: print ) Let's run npm run build and see what this generates. We'll be adding our src/print.js as a new entry point ( print) and we'll change the output as well, so that it will dynamically generate bundle names, based on the entry point names:
Let's also update our dist/index.html file, in preparation for webpack to split out entries: + btn.innerHTML = 'Click me and check the console!' + const btn = document.createElement('button') Įlement.innerHTML = _.join(, ' ') Src/print.js export default function printMe ( ) Īnd use that function in our src/index.js file:Ĭonst element = document.createElement('div') Let's add some logic to our src/print.js file: Preparationįirst, let's adjust our project a little bit: However, a few plugins exist that will make this process much easier to manage. So far we've manually included all our assets in our index.html file, but as your application grows and once you start using hashes in filenames and outputting multiple bundles, it will be difficult to keep managing your index.html file manually. This guide extends on code examples found in the Asset Management guide.