webpack-scheme-helper
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    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

    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:

    • JavaScript (and .jsx files)
    • 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.

    Example

    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)
    
    vendor.ts
    import WebpackScheme from 'webpack-scheme-helper';
    import { PROJECT, WEB, BUILD, PACKAGE } from '../constants';
     
    export default
    WebpackScheme
     
        // Use the 'full' scheme as a starting point.
        // This enables all features by default.
        .full()
     
        // Define the build paths for this config.
        .builder({
            project: PROJECT.ROOT,
            web: WEB.ROOT, // wwwroot
            build: `${BUILD.PATH}/vendor` // _client/vendor
        })
     
        // Calling .full() will look for .scss files
        // But SaSS is not used in this project.
        // Ommiting this will have no effect if there are no .scss files in your project.
        .scss(false)
     
        // Compile all the modules individually.
        .addModules(Object.keys(PACKAGE.JSON.dependencies))
     
        // Expose jQuery to Bootstrap.
        .provide({
            "$":"jquery",
            "jQuery":"jquery"
        })
     
        // Define bootstrap's css as its own entry
        // so if by chance the next version only has JavaScript changes.
        // This also include fonts since .full() was used.
        .addEntry(
            "bootstrap.css",
            "./node_modules/bootstrap/dist/css/bootstrap.css")
     
        .render();
    local.ts
    import WebpackScheme from 'webpack-scheme-helper';
    import { PROJECT, WEB, BUILD } from '../constants';
     
    export default
    WebpackScheme
     
        // Use the 'minimal' scheme as a starting point.
        // This starts with JavaScript enabled only.
        .minimal()
     
        // Define the build paths for this config.
        .builder({
            project: PROJECT.ROOT,
            web: WEB.ROOT, // wwwroot
            build: `${BUILD.PATH}/local` // _client/local
        })
     
        // Enable LeSS processing.
        .less()
     
        // Enable TypeScript.
        .typescript()
     
        // Reference the main.ts file as the local entry.
        .addEntry("main", "./Client/src/main.ts")
     
        .render();
    config.ts

    Combine the two configs together.

    import vendor from "./vendor";
    import local from "./local";
     
    export default
    [
        vendor,
        local
    ]
    webpack.config.js

    Demonstrates how to use TypeScript for configs instead of just JavaScript.

    'use strict';
    // Interpret TypeScript.
    require('ts-node').register({ compilerOptions:{ target: "ES2016" } });
    module.exports = require('./Webpack/config.ts');

    Why?

    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.

    Installation

    npm install webpack webpack-scheme-helper --save-dev
    

    Currently, schemes work with your existing Webpack installation as a peer dependency. If you're only packing JavaScript, then no additional installation is necessary. But if you are planning to use features beyond just JavaScript you will need include the modules and loaders necessary.

    The following are the modules necessary if you are going to use a specific loader.

    TypeScript

    npm install ts-loader --save-dev
    

    Also recommended:

    npm install ts-node --save-dev
    npm install tslib --save
    

    HTML

    https://webpack.js.org/loaders/html-loader/

    npm install html-loader --save-dev
    

    CSS

    https://webpack.js.org/loaders/css-loader/

    npm install css-loader style-loader --save-dev
    

    SaSS

    https://webpack.js.org/loaders/sass-loader/

    npm install node-sass style-loader less-loader --save-dev
    

    LeSS

    https://webpack.js.org/loaders/less-loader/

    npm install less style-loader less-loader --save-dev
    

    Fonts or Images

    https://webpack.js.org/loaders/file-loader/

    npm install file-loader --save-dev
    

    Working Cross-Platform Sample

    https://github.com/electricessence/aspnet-core2-starter

    Install

    npm i webpack-scheme-helper

    DownloadsWeekly Downloads

    1

    Version

    1.1.1

    License

    MIT

    Last publish

    Collaborators

    • electricessence