CodeCoupler Webpack First Steps

Commands

In general, CodeCoupler Webpack operates in a way that allows you to continue using the Webpack CLI as usual. The generated Webpack configuration is then used automatically.

If you use the boilerplate, the package.json includes useful scripts that will be used in the following chapters. If you do not use the boilerplate, you can replace all of the following npm commands with regular Webpack CLI commands.

The commands in the "Get Started" chapters can be replaced with:

• npm start: webpack serve --mode development
• npm run build: webpack --mode production
• npm run build:dev: webpack --mode development
• npm run analyze: webpack --analyze --mode development
• npm run build:dev:cdn: webpack --env cdn.enabled --mode development

You can read the complete overview of all scripts in the Command Reference, where you will find additional commands for handling linting, for example.

Configuration

In your webpack.config.js, you will now have two types of configurations:

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

This documentation will only cover the "CodeCoupler Webpack Configuration" or the "Webpack Configuration." It will not mention that these must be done in the webpack.config.js file.

In the CodeCoupler Webpack configuration, you can adjust the dynamic generation of the Webpack configuration by defining some options.

You can use the Webpack configuration options as usual in the Webpack configuration.

The dynamically generated Webpack configuration and your own Webpack configuration will be smartly merged. Your Webpack configuration takes precedence.

Advanced Configuration

By default, webpack.config.js merges the dynamically created Webpack configuration with the standard Webpack configuration using webpack-merge. If you want more control over the merging process, you can split the commands and merge them yourself.

From

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

To

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

  let StandardWebpackConfig = {
    // Webpack Configuration
  };

  // Apply own merge strategy and
  // return final Webpack configuration
  return merge(CodeCouplerWebpackConfig, StandardWebpackConfig);
};