CodeCoupler Webpack Configuration Factory Setup

Start from scratch

Install the NPM Package ¹:

mkdir test-project
cd test-project
npm init --yes
npm i @codecoupler/webpack-configuration-factory --save-dev

Create a file called webpack.config.js:

const ccWebpack = require("@codecoupler/cc-webpack");
module.exports = (env) =>
  ccWebpack(
    {
      // CodeCoupler Webpack Configuration
    },
    env,
    {
      // Webpack Configuration
    }
  );

Create a directory for your source code:

mkdir src

Create a file named index.js in the src directory:

document.body.innerHTML = "Hello World";

Install on existing project

If you already have a project up and running, you can install the CodeCoupler Configuration Factory package:

npm i @codecoupler/webpack-configuration-factory --save-dev

Next, make changes to your webpack.config.js file: ²

From

module.exports = {
  // Webpack Configuration
};

To

const ccWebpack = require("@codecoupler/cc-webpack");
module.exports = (env) =>
  ccWebpack(
    {
      // CodeCoupler Webpack Configuration
    },
    env,
    {
      // Webpack Configuration
    }
  );

Of course, there are additional requirements that must be met, unless you make further configuration changes. For example, an index.js file must be present in the src folder.

The best way to start is to work through the Development Environment walkthrough to familiarize yourself with the basics.

The package name has change in version 5 from @codecoupler/cc-webpack to @codecoupler/ webpack-configuration-factory. Please read the update notes and the archived version of the setup procedure ↩
These instructions are only valid for version 4 and higher. For earlier versions, you must use the CodeCoupler Webpack CLI and separate configuration files. ↩