From bf5d353af1f49b7a8ecb4e0beabfbe191c692e3c Mon Sep 17 00:00:00 2001 From: K Adam White Date: Fri, 15 Jan 2021 15:49:42 -0500 Subject: [PATCH 1/3] Add a hello-world test build to run during CI --- .eslintignore | 3 +++ .gitignore | 1 + .travis.yml | 2 +- package.json | 4 +++- test/.babelrc.js | 1 + test/src/helpers.js | 6 ++++++ test/src/index.js | 8 ++++++++ test/src/style.scss | 11 +++++++++++ test/test-config.js | 24 ++++++++++++++++++++++++ 9 files changed, 58 insertions(+), 2 deletions(-) create mode 100644 test/.babelrc.js create mode 100644 test/src/helpers.js create mode 100644 test/src/index.js create mode 100644 test/src/style.scss create mode 100644 test/test-config.js diff --git a/.eslintignore b/.eslintignore index b3ceaf0..569110a 100644 --- a/.eslintignore +++ b/.eslintignore @@ -8,3 +8,6 @@ docs/ # Ignore third-party code src/vendor + +# The test folder uses ES modules +test/src diff --git a/.gitignore b/.gitignore index 740a0a4..6a28462 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules *.log package-lock.json +test/build diff --git a/.travis.yml b/.travis.yml index d46d076..88bcb31 100644 --- a/.travis.yml +++ b/.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/* diff --git a/package.json b/package.json index cdda1ae..f335b4c 100644 --- a/package.json +++ b/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": { diff --git a/test/.babelrc.js b/test/.babelrc.js new file mode 100644 index 0000000..ab7d426 --- /dev/null +++ b/test/.babelrc.js @@ -0,0 +1 @@ +module.exports = require( '../babel-preset' ); diff --git a/test/src/helpers.js b/test/src/helpers.js new file mode 100644 index 0000000..1c0daa0 --- /dev/null +++ b/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'; +}; diff --git a/test/src/index.js b/test/src/index.js new file mode 100644 index 0000000..032f5a8 --- /dev/null +++ b/test/src/index.js @@ -0,0 +1,8 @@ +import { getResults } from './helpers'; + +import './style.scss'; + +( async () => { + const results = await getResults(); + console.log( results ); +} )(); diff --git a/test/src/style.scss b/test/src/style.scss new file mode 100644 index 0000000..93fe5fe --- /dev/null +++ b/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; + } + } +} diff --git a/test/test-config.js b/test/test-config.js new file mode 100644 index 0000000..420411f --- /dev/null +++ b/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' ), + }, + } ), +]; From 7e78ed799dfd304284b7744b68903b7902eab598 Mon Sep 17 00:00:00 2001 From: K Adam White Date: Fri, 15 Jan 2021 15:50:49 -0500 Subject: [PATCH 2/3] Add notice about Webpack 4 in install instructions --- docs/guides/getting-started.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/guides/getting-started.md b/docs/guides/getting-started.md index c6e40fa..f83e718 100644 --- a/docs/guides/getting-started.md +++ b/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 node-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. From 48f4d44d4bce3c69ff18d6f4f44551d3f355ae85 Mon Sep 17 00:00:00 2001 From: K Adam White Date: Fri, 15 Jan 2021 15:55:13 -0500 Subject: [PATCH 3/3] Update outdated node-sass reference in "getting started" to use "sass" package --- docs/guides/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/getting-started.md b/docs/guides/getting-started.md index f83e718..c76dac7 100644 --- a/docs/guides/getting-started.md +++ b/docs/guides/getting-started.md @@ -17,7 +17,7 @@ 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@4 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.