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/docs/guides/getting-started.md b/docs/guides/getting-started.md index c6e40fa..c76dac7 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 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. 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' ), + }, + } ), +];