src and dist file structure for Webpacksrc folder for our JS and SASS code that we want Webpack to compile, and a dist folder that contains Webpack-compiled files and other files that we may want to expose to the client, such as main.html. Our Express index.mjs is configured to expose files in dist publicly.webpack.config.js, change the filename from main.js to main-[contenthash].jsdist folder, a file created with a hashed string in its name.<script> tag in index.html such that it changes with every new .js file generated in the dist folder.template.html in the src folder, and copy over the code in index.html. Delete the script tag.webpack.config.js and add the line new HtmlWebpackPlugin({template: './src/template.html}), to the plugins section. webpack.config.js should look like the following.npm run build will generate an index.html file in the dist folder that contains a dynamically-generated script tag. This script tag imports the content of src/index.js that has been transpiled (translated) by Webpack into browser-readable code.webpack.config.js into 3 files: common, dev, and prod. We will put configuration that is shared between dev and prod environments in webpack.common.js, and dev and prod-specific configuration in webpack.dev.js and webpack.prod.js respectively.webpack.common.js, webpack.dev.js, webpack.prod.js in the project directory.webpack-merge.webpack-merge is used to integrate the 3 config filespackage.json for convenience and so that Heroku can run Webpack. By default, Heroku looks for Node scripts called build and start to execute Node applications deployed to Heroku. Define the following scripts in package.json.build compiles our application with Heroku into a "build" for production environments.start starts our server.watch compiles our application for development environments, and auto-recompiles the application according to the specification in webpack.dev.js. In our example, webpack.dev.js tells Webpack to recompile the application when we have changed files in src.dist/main.html file to load our JS to our browsers. Let's connect this file to Express so that Express can serve this file. Notice we are making less use of EJS and more use of DOM code that is injected via a single HTML file. This is a pattern that we will see more of as we move into React in Module 7.nodemon, but now there is an extra Webpack compilation step that we will automate with Webpack's "watch" feature, in the Node watch script we wrote above in package.json.nodemon index.mjs and another running npm run watch. The former will reload our Express apps on changes, and the latter will re-run Webpack on changes in src.webpack.common.js for more complex projects.cd into the repo folder.full-example branch, which contains default models, migrations and seeders for this example. The main branch is the same code without the default data.config/config.js database config file with your Unix username.full-example branch to push code from that branch to Heroku. See git push heroku syntax here.