Add "smoke test" build to CI, and specify Webpack 4 in "getting started"

.eslintignore

@@ -8,3 +8,6 @@ docs/
 
 # Ignore third-party code
 src/vendor
+
+# The test folder uses ES modules
+test/src

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 *.log
 package-lock.json
+test/build

.travis.yml

@@ -1,5 +1,5 @@
 language: node_js
-script: "npm run lint && npm run test"
+script: "npm run lint && npm run test && npm run test-build"
 node_js:
   - node
   - lts/*

docs/guides/getting-started.md

@@ -17,9 +17,11 @@ npm install --save-dev @humanmade/webpack-helpers
 While this package depends in turn on a number of loaders and plugins, it deliberately does _not_ include `webpack` itself. To install this library along with all its relevant peer dependencies, therefore, you may run the following command:
 
 ```bash
-npm install --save-dev @humanmade/webpack-helpers webpack webpack-cli webpack-dev-server node-sass
+npm install --save-dev @humanmade/webpack-helpers webpack@4 webpack-cli webpack-dev-server sass
 ```
 
+Note that we specify Webpack version 4. Support for Webpack 5 is anticipated in the v1.0 release of these helpers, but at present using Webpack 4 provides the most predictable and stable experience across our projects.
+
 ## Configuring Webpack
 
 By convention we generally put our Webpack configuration in a `.config/` folder in the project root. If you're working on a specific theme or plugin the project root may be the theme or plugin folder root, but on an Altis or WordPress VIP project the project root is likely to be the `wp-content` root or a folder outside your web root entirely. By putting your Webpack configuration at this higher level, one Webpack build command or dev server instance may be used to bundle the assets for multiple relates themes and plugins.

package.json

@@ -19,7 +19,8 @@
   ],
   "scripts": {
     "lint": "eslint .",
-    "test": "jest"
+    "test": "jest",
+    "test-build": "webpack --config=test/test-config.js"
   },
   "jest": {
     "setupFilesAfterEnv": [
@@ -32,6 +33,7 @@
     "sass": "^1.26.10",
     "typescript": "^4.0.2",
     "webpack": "^4.35.0",
+    "webpack-cli": "^4.3.1",
     "webpack-dev-server": "^3.7.2"
   },
   "dependencies": {

test/.babelrc.js

@@ -0,0 +1 @@
+module.exports = require( '../babel-preset' );

test/src/helpers.js

@@ -0,0 +1,6 @@
+export const wait = ( delay ) => new Promise( ( resolve ) => setTimeout( resolve, delay ) );
+
+export const getResults = async () => {
+	await wait( 500 );
+	return 'Results';
+};

test/src/index.js

@@ -0,0 +1,8 @@
+import { getResults } from './helpers';
+
+import './style.scss';
+
+( async () => {
+	const results = await getResults();
+	console.log( results );
+} )();

test/src/style.scss

@@ -0,0 +1,11 @@
+div {
+	p {
+		font-family: 'Papyrus';
+
+		&:first-child {
+			color: 'red';
+			font-weight: bold;
+			font-family: 'Comic Sans MS', sans-serif;
+		}
+	}
+}

test/test-config.js

@@ -0,0 +1,24 @@
+const { presets, helpers } = require( '../index' );
+
+const { filePath } = helpers;
+
+module.exports = [
+	presets.production( {
+		name: 'production-test',
+		entry: {
+			prod: filePath( 'test/src/index.js' ),
+		},
+		output: {
+			path: filePath( 'test/build/prod' ),
+		}
+	} ),
+	presets.development( {
+		name: 'dev-test',
+		entry: {
+			prod: filePath( 'test/src/index.js' ),
+		},
+		output: {
+			path: filePath( 'test/build/dev' ),
+		},
+	} ),
+];