Skip to content

CodeCoupler Webpack

CodeCoupler Webpack is a compilation of Webpack libraries that are fine-tuned to work together. It allows you to start authoring libraries and web applications in modern JavaScript, TypeScript, Vue, and CSS without having to worry about linting, compiling, or transpiling. Rather than creating a Webpack configuration file, you can start right away.

The CodeCoupler Webpack library creates the entire configuration on the fly and starts the Webpack compilation, coupling these libraries in 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 sasssass StylelintStylelint svg-sprite-loadersvg-sprite-loader svgo-loadersvgo-loader ts-loaderts-loader TypeScriptTypeScript typescript-eslinttypescript-eslint vue-loadervue-loader webpackwebpack webpack-mergewebpack-merge webpack-require-fromwebpack-require-from webpack-inject-pluginwebpack-inject-plugin webpackbarwebpackbar

The following base libraries used by CodeCoupler Webpack, EJS Webpack Loader, Babel, Autoprefixer, and postcss-preset-env that are worth mentioning are:

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

Further Webpack third-party contributions include:

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 generated configuration supports all modern web essentials out of the box: ES6 JavaScript and TypeScript, CSS and CSS Modules, Vue Single File Components, HTML/EJS templates, and automatic handling of assets and SVGs.

  • JS TS

    ES6 JavaScript and TypeScript Modules

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

  • CSS CSS Modules

    CSS Files and CSS Modules

    With modern and pure CSS, you won't need to worry about vendor prefixes or browser inconsistencies. With CSS Modules, all class and animation names are scoped locally by default.

  • VUE

    Vue Single File Components

    You can use .vue files, which are interpreted as vue single-file components. You can also use modern ES6 syntax and CSS modules.

  • HTML EJS

    HTML Files and EJS Templates

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

  • JPG PNG

    Assets

    All imported assets, such as fonts and images, will be extracted and saved separately.

  • SVG

    SVG Files

    Import SVG files or SVG sprites, which will be optimized and bundled into the code. Alternatively, all used SVG files can be combined into a single sprite and injected into the DOM.

The dependency tree begins with an entry file (index.js by default, located in the src directory) and considers import statements in JavaScript, as well as links in HTML and CSS, such as @import statements, and <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;

The JavaScript, TypeScript and CSS will be linted, formatted, transpiled and bundled into separate files compatible with all the browsers specified in the .browserslistrc file. These bundles will then be copied into the dist destination directory with a file name containing a hash value. This ensures that the most recent files are always used in the browser when updating.

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];
  end
  L --> N;
  N[Add Hash to Filename];
  N --> O;
  O["`**📁 dist**`"];

Other linked assets (such as images) and dynamically imported scripts are copied to their own destination directories 1. Here, too, a hash value is appended to the file name. Any external libraries that have been explicitly excluded from the bundle are copied to a separate directory. The directory name includes the used version number. These measures allow us to always use the most recent files in the browser when updating.

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

Finally, the contents of the static directory will be copied to the dist directory, and all possible favicon formats will be generated from the configuration files in the manifest directory 2. A reference to the JavaScript and CSS bundle will be injected into all HTML files.

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 that includes some important configuration files that allow you to take full advantage of CodeCoupler Webpack, including easy-to-use npm scripts.

Features of the boilerplate:

  • Wired Togehter

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

  • Support Visual Code

    Includes a configuration for Visual Code that supports auto-formatting code, linting, and consistent file formatting (e.g., tab size and end-of-line characters).

  • Keep Repo Clean

    Before any commit, the associated linter will check the staged .ts, .vue, .js, and .css files. If any of these checks fail (process exits with non-zero code), the commit will be aborted. Therefore, you must first clean up your code so that your repository never receives ugly code.

  • Remove Debugging Statements

    Use console.debug() whenever you want to output debugging messages to the console. These statements will be removed when you compile for production.

  1. Until version 3, images and other assets were not copied into the directory assets. Instead, they were copied directly into the dist directory. ↩

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