CodeCoupler Webpack Configuration Factory

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:

Babel babel-plugin-strip-function-call clean-webpack-plugin core-js ejs-compiled-loader ejs-loader ESLint Favicons favicons-webpack-plugin html-webpack-deploy-plugin html-webpack-plugin husky lint-staged mini-svg-data-uri postcss postcss-preset-env Prettier sass Stylelint svg-sprite-loader svgo-loader ts-loader TypeScript typescript-eslint vue-loader webpack webpack-merge webpack-require-from webpack-inject-plugin webpackbar

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

Autoprefixer Browserslist caniuse ejs find-up lodash slash yargs

Further Webpack third-party contributions include:

copy-webpack-plugin css-loader css-minimizer-webpack-plugin eslint-webpack-plugin html-loader mini-css-extract-plugin postcss-loader sass-loader stylelint-webpack-plugin webpack-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 ¹. A hash value is also appended to the file name here, ensuring that the most recent files are always used by the browser when updating.

Any external libraries that have been explicitly excluded from the bundle can be copied to a separate directory. The directory name will include the version number of the library used. This ensures that the most recent files are always used by the browser when updating. You can also opt to use the CDN version of the library.

All possible favicon formats will be generated from the configuration files in the manifest directory ².

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

Finally, the contents of the 'static' directory will be copied to the 'dist' directory. References to the JavaScript bundle, the CSS bundle, external modules, the generated manifest and the favicons will be injected into all HTML files.

graph TB
  A[HTML Files from 📁 static] --> D --> F;
  B[All other Files from 📁 static] .-> F;
  D[Inject JavaScript, CSS, Modules, Manifest, Favicons];
  F["`**📁 dist**`"];

Until version 3, images and other assets were not copied into the directory assets. Instead, they were copied directly into the dist directory. ↩
Until version 3 the configuration files of the manifest and the favicons were placed in the directory dist (favicon.png and manifest.webmanifest). ↩