Skip to content

CodeCoupler Webpack

CodeCoupler Webpack is a compilation of Webpack libraries fine-tuned to each other to start authoring libraries and web applications in modern JavaScript, TypeScript, Vue and CSS without having to worry about linting, compiling and transpiling. Instead of having to spend the effort creating a Webpack configuration file, you can get started right away.

CodeCoupler Webpack creates the entire configuration on the fly and start the Webpack compilation coupling these libraries (alphabetical order):

BabelBabel babel-plugin-strip-function-callbabel-plugin-strip-function-call clean-webpack-pluginclean-webpack-plugin core-jscore-js ejs-compiled-loaderejs-compiled-loader ejs-loaderejs-loader ESLintESLint FaviconsFavicons favicons-webpack-pluginfavicons-webpack-plugin html-webpack-deploy-pluginhtml-webpack-deploy-plugin html-webpack-pluginhtml-webpack-plugin huskyhusky lint-stagedlint-staged mini-svg-data-urimini-svg-data-uri postcsspostcss postcss-preset-envpostcss-preset-env prettierPrettier sass-embeddedsass-embedded StylelintStylelint svg-sprite-loadersvg-sprite-loader svgo-loadersvgo-loader ts-loaderts-loader TypeScriptTypeScript typescript-eslinttypescript-eslint VueVue webpackwebpack webpack-mergewebpack-merge webpack-require-fromwebpack-require-from webpack-inject-pluginwebpack-inject-plugin webpackbarwebpackbar

Base libraries used by CodeCoupler Webpack, EJS Webpack Loader, Babel, Autoprefixer and postcss-preset-env that should be mentioned here:

AutoprefixerAutoprefixer BrowserslistBrowserslist caniusecaniuse ejsejs find-upfind-up Lodashlodash slashslash yargsyargs

Further Webpack 3rd party contributions:

copy-webpack-plugincopy-webpack-plugin css-loadercss-loader css-minimizer-webpack-plugincss-minimizer-webpack-plugin eslint-webpack-plugineslint-webpack-plugin html-loaderhtml-loader mini-css-extract-pluginmini-css-extract-plugin postcss-loaderpostcss-loader sass-loadersass-loader stylelint-webpack-pluginstylelint-webpack-plugin webpack-bundle-analyzerwebpack-bundle-analyzer

The configuration is prepared in such a way that a dependency tree is built starting with one file (by default the index.js file in the src directory). Dependencies can be built up on:

  • JS TS

    ES6 JavaScript and TypeScript Modules

    You can use modern ES6 syntax and use the ES6 modules standard in all of your JavaScript and TypeScript files.

  • CSS CSS Modules

    CSS Files and CSS Modules

    You can use modern and pure CSS without thinking about vendor prefixes or browser inconsistencies. You can use CSS Modules where all class names and animation names are scoped locally by default.

  • VUE

    Vue Single File Components

    You can use .vue files which will be interpreted as vue single-file components. You can use modern ES6 syntax and CSS modules.

  • HTML EJS

    HTML Files and EJS Templates

    You can import the content of an HTML file into a string. You can use EJS templates to dynamically fill your HTML with variable values.

  • JPG PNG

    Assets

    All imported assets like fonts and images will be extracted and saved separately.

  • SVG

    SVG Files

    Import SVG files or SVG sprites that will be optimized and bundled into the code. Alternatively all used SVG files can be injected as one single sprite into the DOM.

Links in HTML and CSS to other files are also taken into account in the same way as import statements in JavaScript (e.g. via @import statements or <script> and <link> tags).

graph TB
  C[JavaScript, TypeScript];
  D[JPG, GIF, SVG or any other asset];
  E[CSS or CSS Modules];
  F[HTML and EJS Templates];
  C ==>|import| D;
  C ==>|import| E;
  C ==>|import| F;
  E -->|url| D;
  E .->|@import| E;  
  F -->|&lt;script&gt;| C;
  F -->|&lt;href&gt;| D;
  F -->|&lt;link&gt;| E;

JavaScript, TypeScript and CSS Parts will be prepared and combined into separate files which works in all browsers that have been specified in the .browserslistrc file. In development mode some features will be disabled for better compiling perfomance and easier debuging:

  • JavaScript, CSS and HTML will not minified or mangled.
  • An inline source maps will be created.
  • Only one simple favicon will be created.

graph TB
  A1[JavaScript and TypeScript] --> Prepare;
  A3[CSS] --> Prepare;
  subgraph Prepare[Prepare for targeted Browsers];
    direction LR;
    B[Lint] --> C;
    C[Format] --> M;
    M[Compile & Transpile]
  end;
  Prepare --> J;
  Prepare --> K;
  subgraph J[Production Mode];
    direction LR;
    E[Mangle and Minimize] --> F;
    F[Add Banner];
  end
  subgraph K[Development Mode]
    G[Create a Source Map];        
  end
  J --> L;
  K --> L;
  subgraph L[Bundle]
    direction LR;
    H[JavaScript Bundle];
    I[CSS Bundle];
    H <--> I;
  end

Build outputs will be copied into their own destination directory 1 with a filename containing a hash value or a directory name containing a version number. This allows us to always use the most recent files in the browser when updating.

graph TB
  A[JavaScript and CSS Bundle] --> F --> G;
  C[Images and other Assets] --> F --> H;
  D[Dynamic loaded Parts] --> F --> I;
  E[External Modules] --> F2 --> J;
  F[Add Hash to Filename];
  F2[Add Version to Directory];
  G["`**📁 dist**`"];
  H["`**📁 dist/assets**`"];
  I["`**📁 dist/parts**`"];
  J["`**📁 dist/vendor**`"];

Finally the content of the static directory will be copied into the dist directory and all possible favicon formats will be created from the configuration files in the manifest directory 2. All HTML files are injected with a reference to the JavaScript and CSS bundle.

graph TB
  A[HTML Files from 📁 static] ==> D ==> D2 ==> F;
  B[All other Files from 📁 static] .-> F;
  C[Configuration from 📁 manifest] --> E --> D2 --> G;
  D[Inject JavaScript and CSS Bundle];
  D2[Inject Manifest and Icons];
  E[Create Manifest and Favicons];
  F["`**📁 dist**`"];
  G["`**📁 dist/manifest**`"];

Initializing a CodeCoupler Webpack project with npm init cc-webpack will create a boilerplate which include some important configuration files to exploit the full potential of CodeCoupler Webpack including easy to use npm scripts.

Features of the boilerplate:

  • Wired Togehter

    Ensures that all linter, formatter and compiler work together and guarantees consistent code formatting and balanced line lengths (80 for JavaScript, 100 for Markdown, 120 for HTML).

  • Support Visual Code

    Includes configuration for Visual Code to support auto format and linting with the libraries used and consistent file formating (like tab size, end of line characters).

  • Keep Repo Clean

    Before any commit, staged .ts, .vue, .js and .css files will be checked by the associated linter. If any of these checks fail (process exits with non-zero code), the commit will be aborted. So you have first to cleanup your code and your repository never receive ugly code.

  • Remove Debugging Statements

    Whenever you want to output some debugging messages to the console just use console.debug(). These statements will be removed if you compile for production.

  1. Till version 3 images and other assets was not copied into the own directory assets. Instead they was copied into the dist directory directly. ↩

  2. Till version 3 the configuration files of the manifest and the favicons was placed in the directory dist (favicon.png and manifest.webmanifest). ↩