Webpack build for dist (#2812)

Co-authored-by: Christian Oliff <christianoliff@pm.me>

dist/package.json

@@ -10,12 +10,15 @@
   "author": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack-dev-server --open --port 8080"
+    "start": "webpack serve --open --config webpack.config.dev.js",
+    "build": "webpack --config webpack.config.prod.js"
   },
   "devDependencies": {
-    "webpack": "^5.74.0",
+    "copy-webpack-plugin": "^11.0.0",
     "html-webpack-plugin": "^5.5.0",
+    "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.11.1"
+    "webpack-dev-server": "^4.11.1",
+    "webpack-merge": "^5.8.0"
   }
 }

dist/webpack.common.js

@@ -0,0 +1,12 @@
+const path = require('path');
+
+module.exports = {
+  entry: {
+    app: './js/app.js',
+  }, 
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    clean: true,
+    filename: './js/app.js',
+  },
+};

dist/webpack.config.dev.js

@@ -0,0 +1,16 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  devServer: {
+    liveReload: true,
+    hot: true,
+    open: true,
+    static: ['./'],
+  },
+});
+
+

dist/webpack.config.js

@@ -1,16 +0,0 @@
-const HtmlWebpackPlugin =  require('html-webpack-plugin');
-module.exports = {
-  mode : 'development',
-  entry : './js/app.js',
-  devServer: {
-    liveReload: true,
-    hot: true,
-    open: true,
-    static: ['./'],
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: './index.html'
-    })
-  ]
-};

dist/webpack.config.prod.js

@@ -0,0 +1,28 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+const HtmlWebpackPlugin =  require('html-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+
+module.exports = merge(common, {
+  mode: 'production',
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './index.html'
+    }),
+    new CopyPlugin({
+      patterns: [
+        { from: 'img', to: 'img' },
+        { from: 'css', to: 'css' },
+        { from: 'js/vendor', to: 'js/vendor' },
+        { from: 'icon.svg', to: 'icon.svg'},
+        { from: 'favicon.ico', to: 'favicon.ico'},
+        { from: 'tile-wide.png', to: 'tile-wide.png'},
+        { from: 'robots.txt', to: 'robots.txt'},
+        { from: 'icon.png', to: 'icon.png'},
+        { from: '404.html', to: '404.html'},
+        { from: 'site.webmanifest', to: 'site.webmanifest'},
+        { from: 'tile.png', to: 'tile.png'}
+      ],
+    })
+  ],
+});

docs/usage.md

@@ -49,7 +49,9 @@ A basic HTML5 Boilerplate site initially looks something like this:
 ├── site.webmanifest
 ├── tile.png
 ├── tile-wide.png
-└── webpack.config.js
+└── webpack.common.js
+└── webpack.config.dev.js
+└── webpack.config.prod.js
 ```
 
 What follows is a general overview of each major part and how to use them.
@@ -106,3 +108,62 @@ Icon with your own.
 
 If you want to use different Apple Touch Icons for different resolutions please
 refer to the [according documentation](extend.md#apple-touch-icons).
+
+### Webpack
+
+The project contains a simple [webpack](https://webpack.js.org/) configuration. 
+
+To get started developing a site with a development server, run the following 
+commands from within the `/dist/` folder in the project's repo or within the 
+root folder of the dowloaded project files, the folder created by `npm install`
+or the project folder created by running [create\-html5\-boilerplate](https://github.com/h5bp/create-html5-boilerplate) 
+
+```
+npm install
+npm run start
+```
+
+This will start a Webpack development server with hot reloading of edited files. 
+
+To package a site for production run 
+
+```
+npm run build
+```
+
+This command will bundle up the site's JavaScript and copy over static assets to 
+the newly created `dist` folder. 
+
+
+There are three files:
+
+#### webpack.common.js
+
+Both the production and development scripts inherit from this common script.
+
+#### webpack.config.dev.js
+
+This development configuration defines the behavior of development server.
+
+#### webpack.config.prod.js
+
+This production configuration defines the behavior of the production build. 
+
+It copies the following files and folders to the dist folder:
+
+* css
+* img
+* js/vendor
+* 404.html    
+* favicon.ico  
+* icon.png  
+* icon.svg    
+* index.html    
+* robots.txt  
+* site.webmanifest 
+* tile.png  
+* tile-wide.png
+
+`js/vendor` is copied over in order to allow you to use unprocessed JS files 
+(like Modernizr) in addition to the files bundled based on the project's entry
+point `app.js.` 

gulpfile.mjs

@@ -134,6 +134,7 @@ gulp.task('modernizr', (done) => {
 gulp.task('lint:js', () =>
   gulp.src([
     `${dirs.src}/js/*.js`,
+    `${dirs.src}/*.js`,
     `${dirs.test}/*.mjs`
   ]).pipe(gulpEslint())
     .pipe(gulpEslint.failOnError())

package-lock.json

@@ -20496,4 +20496,4 @@
       }
     }
   }
-}
+}

src/package.json

@@ -10,12 +10,15 @@
   "author": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack-dev-server --open --port 8080"
+    "start": "webpack serve --open --config webpack.config.dev.js",
+    "build": "webpack --config webpack.config.prod.js"
   },
   "devDependencies": {
-    "webpack": "^5.74.0",
+    "copy-webpack-plugin": "^11.0.0",
     "html-webpack-plugin": "^5.5.0",
+    "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.11.1"
+    "webpack-dev-server": "^4.11.1",
+    "webpack-merge": "^5.8.0"
   }
 }

src/webpack.common.js

@@ -0,0 +1,12 @@
+const path = require('path');
+
+module.exports = {
+  entry: {
+    app: './js/app.js',
+  }, 
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    clean: true,
+    filename: './js/app.js',
+  },
+};

src/webpack.config.dev.js

@@ -0,0 +1,16 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  devServer: {
+    liveReload: true,
+    hot: true,
+    open: true,
+    static: ['./'],
+  },
+});
+
+

src/webpack.config.js

@@ -1,16 +0,0 @@
-const HtmlWebpackPlugin =  require('html-webpack-plugin');
-module.exports = {
-  mode : 'development',
-  entry : './js/app.js',
-  devServer: {
-    liveReload: true,
-    hot: true,
-    open: true,
-    static: ['./'],
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: './index.html'
-    })
-  ]
-};

src/webpack.config.prod.js

@@ -0,0 +1,28 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+const HtmlWebpackPlugin =  require('html-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+
+module.exports = merge(common, {
+  mode: 'production',
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './index.html'
+    }),
+    new CopyPlugin({
+      patterns: [
+        { from: 'img', to: 'img' },
+        { from: 'css', to: 'css' },
+        { from: 'js/vendor', to: 'js/vendor' },
+        { from: 'icon.svg', to: 'icon.svg'},
+        { from: 'favicon.ico', to: 'favicon.ico'},
+        { from: 'tile-wide.png', to: 'tile-wide.png'},
+        { from: 'robots.txt', to: 'robots.txt'},
+        { from: 'icon.png', to: 'icon.png'},
+        { from: '404.html', to: '404.html'},
+        { from: 'site.webmanifest', to: 'site.webmanifest'},
+        { from: 'tile.png', to: 'tile.png'}
+      ],
+    })
+  ],
+});

test/file_existence.mjs

@@ -18,8 +18,11 @@ const expectedFilesInDistDir = [
   '.gitignore',
   '404.html',
   'package.json',
-  'webpack.config.js',
 
+  'webpack.common.js',
+  'webpack.config.dev.js',
+  'webpack.config.prod.js',
+  
   'css/', // for directories, a `/` character
   // should be included at the end
   'css/normalize.css',