This project creator uses webpack 4 and Babel 6, and LESS as a CSS preprocessor. Bring your own web server and use the NPM watch scripts to make it easier to see your changes.
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:
create
- answer a series of questions in the CLI to create a new project in a specified foldernpm run create
or
npm run create:full
The :full
option will also install the default package dependencies, and init a new git project.
Once you've created a new project, cd
into that folder, npm install
, and then use the following scripts:
dev
- compile the LESS and copy to dist, copy the HTML to dist, and run webpack in development modebuild
- compile the LESS and copy to dist, copy the HTML to dist, and run webpack in production (uglified) modewatch
- compile the LESS and watch, copy the HTML to dist and watch, and run webpack in development mode, watching for changescopy
- move HTML files to dist
copy:watch
- move HTML files to dist and rerun on changesstyles
- compile the LESS to CSS and copy to dist
styles:watch
- compile the LESS to CSS, copy to dist, and rerun on changes