ES6 Boilerplate Project Creator

This is a project creator which uses webpack 4 and Babel 6 to build the JavaScript. This makes it quite easy to configure, since webpack 4 needs almost no configuration out of the box, other than the Babel loader, and Babel has made things quite a bit easier with their env presets, too.

Since the company I work for uses LESS as a CSS pre-processor, I've become quite used to it, so I included less and less-watch-compiler to handle the conversion. I also want all of the source files to be located in a single directory (src, natch) so I've included cpx to handle moving the HTML into dist, the target for the LESS compiler and webpack.

Though I did not include any web server -- since I like VS Code's Live Server extension -- the NPM scripts do include watch functionality to make it even easier to see the changes. Just point your webserver to dist/index.html, created with the project scripts below. Speaking of which:

NPM Scripts

Getting started

• create - answer a series of questions in the CLI to create a new project in a specified folder

npm run create

or

npm run create:full

The :full option will also install the default package dependencies, and init a new git project.

Next

Once you've created a new project, cd into that folder, npm install, and then use the following scripts:

Project scripts

• dev - compile the LESS and copy to dist, copy the HTML to dist, and run webpack in development mode
• build - compile the LESS and copy to dist, copy the HTML to dist, and run webpack in production (uglified) mode
• watch - compile the LESS and watch, copy the HTML to dist and watch, and run webpack in development mode, watching for changes

Scripts used by the project scripts

• copy - move HTML files to dist
• copy:watch - move HTML files to dist and rerun on changes
• styles - compile the LESS to CSS and copy to dist
• styles:watch - compile the LESS to CSS, copy to dist, and rerun on changes