@jitesoft/simple-webpack

    1.12.0 • Public • Published

    Simple webpack

    DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE

    Why make it hard? It's quite simple!


    This repository contains a small init script which generates a simple webpack setup for web application development.
    Other than the configuration, it updates your package.json file to include the required dependencies, devDependencies and scripts.

    The directory structure it creates looks like this:

    your-package/
    ├─ assets/
    │  ├─ fonts/
    │  │  ├─ .gitkeep
    │  ├─ images/
    │  │  ├─ .gitkeep
    │  ├─ static/
    │  │  ├─ index.html
    ├─ dist/
    │  ├─ .gitkeep
    ├─ src/
    │  ├─ style/
    │  │  ├─ index.scss
    │  ├─ js/
    │  │  ├─ index.js
    │  ├─ index.js
    ├─ webpack.config.json
    ├─ .simple
    

    If no package file is found, a default package file will be created.

    The intention is that the script should allow you to keep all your files intact (exception with the webpack and package files). If there are any issues with this, please let me know via github issues.

    Usage

    Initialize your simple-webpack project!

    // From NPM
    npx @jitesoft/simple-webpack
    // Or from repo
    npx github:@jitesoft/simple-webpack
    

    Start building!

    npm i && npm run build      // depends on your node_env
    npm i && npm run build:prod // prod either way!
    npm i && npm run build:dev  // dev either way!
    npm i && npm run watch      // watches your files and compiles them (dev only)
    npm i && npm run serve      // Serve a http client on 0.0.0.0:9000 
    

    By default, an index.html file exists in the assets/static directory, it includes the js and css files by default and can be changed as wanted to fit your use case.

    More details

    If you wish to know what everything in the webpack file does, check the file itself, as it is quite well commented!
    But, either way, feel free to read here if you can't figure out what webpack is doing even then!

    Public Path

    When webpack compiles your assets, it will change all asset paths to fit the new location of the files.
    The default public path used is /, that is, it expects the content of dist to be placed in the root web directory.

    To change this, you can either use an environment variable (SW_PUBLIC_PATH) or change the SW_PUBLIC_PATH variable in the webpack.config.js file. Remember, the public path is the path from the web-root.

    Configuration

    There are two ways to configure the behaviour. You can use the pre-created .simple configuration (json) to change any of the variables inside it or you can use ENV variables.

    .simple

    This is a simple config!
    Defaults looks like the following:

    {
        "publicPath": "",
        "proxyUri": null,
        "devServerPort": 9000,
        "fonts": { "outputDir": "fonts/" },
        "js": { "outputDir": "" },
        "css": { "outputDir": "" },
        "static": { "outputDir": "" },
        "images": {
            "outputDir": "images",
            "plugins": [
                ["mozjpeg", { "quality": 70 }],
                [ "gifsicle", {} ],
                [ "optipng", {} ],
                [ "svgo", {} ]
            ]
        }
    }
    

    All json and will be loaded at the start of the webpack config in case it exists.

    Environment variables

    Environment variables overrides the configuration file and are defined as SW_CONFIG_SEPERATED_WITH_UNDERSCORE, sub-objects are separated with __ (double underscore). arrays are not currently supported (making for example the images.plugins configuration not possible to change via env variables yet).

    Examples:

    SW_PUBLIC_PATH     
    SW_PROXY_URI       
    SW_IMAGES__OUTPUT_DIR 

    Compression and such

    JS and Css

    All the JavaScript files which are included through the src/index.js file will be ran by the babel loader and then minified with terser, the base file will be placed in dist/index.js and all chunks (in case the application is large) will be placed in the same directory but using chunk-hash as the name.

    SCSS files in the src/styles directory that are included in the index.scss file will be ran by the sass loader and after being converted to standard css they will be extracted and minified.
    The output file will be dist/index.css. Any CSS included in the JavaScript code will as well be parsed and emitted to the dist dir.

    Static files

    Any files that you wish to have emitted into the dist directory should be placed in the static directory.
    Subdirectories will be created, not flattened.

    Images

    This configuration uses the imagemin-webpack plugin to compress images. The following image formats are compressed:

    * jpe?g 
    * png
    * gif 
    * tif 
    * svg
    

    Other images (or any files) in the assets/images directory will be copied to the dist/images directory, while these will be compressed and then placed in the same directory.
    The filenames will be kept intact.

    Webp images will be left as is (and copied to the images dist dir), while all PNG and JPG images will get two webp siblings in the directory ([name].webp and [name].low.webp).

    The [name].low.webp image is compressed with lowest quality and (if not good enough for you) a good choice to use as a pre-load image in case the other images are large, the [name].webp uses a higher quality which should be enough for most cases.

    Defaults?

    The image compression plugins (which uses imagemin) are mostly using the default values, with exception to jpeg and webp.
    To change the defaults for all (but webp), change the plugin configuration in the imgminPlugins array. Although, the defaults are decent for most cases.

    Quality for webp can be changed in the ImageminWebpWebpackPlugin config definition.

    Fonts

    Fonts are not tampered with, but they are moved to the dist/fonts directory in case they are placed in the assets/fonts dir or included in JavaScript or in SCSS.

    Serve

    You can allow webpack to serve your content as a http server (uses nodejs express), the current settings allow you to access the assets on localhost port 9000. The localhost and *.local domains are set to be accepted, but read the comments in the webpack file if you wish to enable more or turn off blocking over all.

    The server is set to inject a hot module swap client inside the index.js file, so if enabled, it will allow for hot swapping.

    When using the dev server, the public path will have to be used.

    Including the assets is done by adding script tags pointing to the specific file you need:

    <script src="localhost:9000/index.js"></script>

    You can also enable the proxy of the webpack server to allow another page to be proxied through it. This is done by setting the SW_PROXY_URI to the uri of the proxied page.
    When doing this, you will have the pages on the same uri and any request not going to one of the webpack assets will be proxied to the other service.


    License: WTFPL

                 DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
                         Version 2, December 2004
     
      Copyright (C) 2020 Jitesoft
     
      Everyone is permitted to copy and distribute verbatim or modified
      copies of this license document, and changing it is allowed as long
      as the name is changed.
     
                 DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
        TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
     
       0. You just DO WHAT THE FUCK YOU WANT TO.
    

    Install

    npm i @jitesoft/simple-webpack

    DownloadsWeekly Downloads

    0

    Version

    1.12.0

    License

    SEE LICENSE IN LICENSE

    Unpacked Size

    30.4 kB

    Total Files

    10

    Last publish

    Collaborators

    • jitesoft~
    • johannestegner