Configuring NPM and Webpack

If you are using NPM and Webpack, you will need to configure them to move the static HTML templates into the directory where files are served.

Follow these steps to configure NPM and Webpack:

1. Open package.json from the root project directory and add copy-webpack-plugin as a development dependency by running:

   // package.json line #13
   // ...
   "devDependencies": {
     "copy-webpack-plugin": "^4.6.0",
     "css-loader": "^1.0.1",
   // ...
2. Open webpack.config.js, import copy-webpack-plugin and configure the static elements to be copied into the serving directory by running:

   // webpack.config.js line #1
   const path = require('path');
   const CopyWebpackPlugin = require('copy-webpack-plugin');
   const HtmlWebpackPlugin = require('html-webpack-plugin');

   // webpack.config.js line #32
   plugins: [
     new HtmlWebpackPlugin({
       template: "src/index.html",
       favicon: 'src/image/favicon.ico'
     }),
   
     // Configure plugin to copy static elements
     new CopyWebpackPlugin([
       {
         from: 'src/lorem-ipsum-formatted.html',
         to: ''
       },
       {
         from: 'src/image/ipse-dixit.png',
         to: ''
       },
       {
         from: 'src/image/greek-statue-face.png',
         to: ''
       }])
   ],
   // ...