Webpack Scheme Helper
Minimize the amount of configuration and code necessary for webpack by using 'schemes'.
Otherwise known as 'scenarios'.
Source code is in TypeScript.
Schemes are a typical way that files are deployed.
This utility simplifies the construction of a config that follows a typical scheme.
Certain settings are enabled by default:
- Builds are cleaned by default.
- All files are hashed.
- All files are minified and source-mapped by default.
- Proper long term hashing is retained using the hash plugin.
- webpack-assets.json is generated by default.
Other file types are managed by including their loader as part of your
package.json and enabling them in your scheme.
- TypeScript (and .tsx files)
- HTML, CSS, SaSS, and LeSS
- Fonts and Images.
After which, all you have to do is provide the project path and build paths.
The following example takes all the dependencies defined in the
package.json along with any manually specified entries.
It will successfully compile and bundle all TypeScript, CSS, LeSS files (and SaSS if desired) into a web folder structure like so:
(An underscore prefix is used so as not to be confused with a route or to designate a category.)
wwwroot |- /_client |- /vendor |- /_fonts ... (fonts from bootstrap) |- jquery |- bootstrap ... (and more modules) |- /local |- main (will include a common chunk if more entries specified)
Combine the two configs together.
'use strict';// Interpret TypeScript.;moduleexports = ;
Webpack configs are detailed and highly configurable, but settings must be configured in multiple places for one specific file type or option to work properly. This utility procedurally configures all necessary options based upon desired features and the source code for the procedure is easily readable.
A lot of time and care has gone into getting this utility to follow Webpack best practices. Comments and feedback are encouraged.
npm install webpack webpack-scheme-helper --save-dev
The following are the modules necessary if you are going to use a specific loader.
npm install ts-loader --save-dev
npm install ts-node --save-dev npm install tslib --save
npm install html-loader --save-dev
npm install css-loader style-loader --save-dev
npm install node-sass style-loader less-loader --save-dev
npm install less style-loader less-loader --save-dev
Fonts or Images
npm install file-loader --save-dev