CodeCoupler Webpack Configuration Factory Commands

You do not need to install any dependencies for any of the following commands. They are already installed, and the generated Webpack configuration is ready to use these features.

You can use the script shortcuts defined in the package.json file to run commands for compiling, testing, linting, etc. The recommended configuration for the scripts section of the package.json file is as follows:

{
  "scripts": {
    "prepare": "husky",
    "test": "echo \"no test specified\"",
    "test:cc-webpack": "webpack --env test=raw --env plugins.WebpackBar=false --mode production",
    "test:cc-webpack:dev": "webpack --env test=raw --env plugins.WebpackBar=false --mode development",
    "analyze": "webpack --analyze --mode development",
    "build": "webpack --mode production",
    "build:watch": "webpack watch --mode production",
    "build:cdn": "webpack --env cdn.enabled --mode production",
    "build:watch:cdn": "webpack watch --env cdn.enabled --mode production",
    "build:dev": "webpack --mode development",
    "build:dev:cdn": "webpack --env cdn.enabled --mode development",
    "watch": "webpack watch --mode development",
    "watch:cdn": "webpack watch --env cdn.enabled --mode development",
    "start": "webpack serve --mode development",
    "start:cdn": "webpack serve --env cdn.enabled --mode development",
    "format": "prettier -cu .",
    "format:fix": "prettier -wu .",
    "lint": "npm format && npm run lint:eslint && npm run lint:stylelint && npm run lint:markdownlint",
    "lint:fix": "npm run format:fix && npm run lint:eslint:fix && npm run lint:stylelint:fix && npm run lint:markdownlint:fix",
    "lint:eslint": "eslint",
    "lint:eslint:fix": "eslint --fix",
    "lint:stylelint": "stylelint \"**/*.?(s)css\" --allow-empty-input",
    "lint:stylelint:fix": "stylelint \"**/*.?(s)css\" --allow-empty-input --fix",
    "lint:markdownlint": "markdownlint-cli2 \"**/*.md\" \"#node_modules\" \"#CHANGELOG.md\"",
    "lint:markdownlint:fix": "markdownlint-cli2 \"**/*.md\" \"#node_modules\" \"#CHANGELOG.md\" --fix"
  }
}

Otherwise, you can use the Webpack CLI as normal. Below, all the scripts from the above package.json are listed alongside the corresponding Webpack CLI commands.

One short note to the option --mode: If not set, the default value is development and not production like in Webpack.

Override CodeCoupler Webpack Configuration from CLI

Your webpack.config.js file will normally call the CodeCoupler Webpack Configuration Factory function as follows:

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

The first argument specifies the CodeCoupler Webpack configuration to be used. The second argument is another configuration that can be used to override the Webpack CLI argument --env.

For example, to run a build, you would use the following command:

npx webpack

You can override the following CodeCoupler Webpack Configuration Factory configuration settings:

{
  cdn: {
    enabled: true
  },
  bundle: {
    libraryName: "funnyName",
    jsNameHashed: false
  }
}

By doing the following:

npx webpack --env cdn.enabled --env bundle.libraryName=funnyName --env jsNameHashed=false

Values assigned with "false" or "true" will be converted to Boolean values. Values consisting of digits only will be converted to integer values. All other values are strings (or the boolean value "true" if omitted). Read more about the --env argument.

Scripts Overview

Development Builds:

npm start npx webpack serve --mode development

This will build the library, start the webpack development server and the browser pointing to the server. Everytime you modify your code the page will be automatically reloaded.

npm run watch npx webpack watch --mode development

This will build the library and save the results in the dist folder. Everytime you modify your code the compilation will start automatically again.

You can use this environment if you have to use another server then the webpack development server.

npm run build:dev npx webpack --mode development

This will build the library and save the results in the dist folder. Nothing more.

Analyze Builds:

npm run analyze npx webpack --analyze --mode development: Analyze your output bundles emitted by webpack ¹.

Production Builds:

npm run build npx webpack --mode production: Start the production build.
npm run build:watch npx webpack watch --mode production: This command will stay after the production build in the watch mode and will recompile whenever a source file is changed.

CDN Builds:

You can build your code to include CDN links to your external modules instead of copying to the dist folder with these commands:

npm run start:cdn npx webpack serve --env cdn.enabled --mode development: Development Server running with CDN build.
npm run watch:cdn npx webpack watch --env cdn.enabled --mode development: Watching mode with CDN build.
npm run build:dev:cdn npx webpack --env cdn.enabled --mode development: Just build a CDN version in development mode.
npm run build:cdn npx webpack --env cdn.enabled --mode production: Final production CDN build.
npm run build:watch:cdn npx webpack watch --env cdn.enabled --mode production: Watching mode with final production CDN build.

Format & Linting Tools:

To use the format & linting features you have to create the following configuration files:

eslint.config.js
.prettierrc
.stylelintrc
.markdownlint.json

npm run lint: This command will format and lint all script-, stylesheet- and markdown files in the src folder. Any errors will be printed out in the command line.
npm run lint:fix: This command is equivalent to npm run lint. Any errors that can be fixed automatically will be fixed by this command; any other errors will be printed out in the command line.
npm run format: This command will only format all script, stylesheet and markdown files in the src folder. Any errors will be printed out in the command line.
npm run format:fix: This command is equivalent to npm run format. Any errors that can be fixed automatically will be fixed by this command; any other errors will be printed out in the command line.
npm run lint:eslint: This command will lint all script files in the src folder. Any errors will be printed out in the command line.
npm run lint:eslint:fix: This command is equivalent to npm run eslint. Any errors that can be fixed automatically will be fixed by this command; any other errors will be printed out in the command line.
npm run lint:stylelint: This command will lint all stylesheet files in the src folder. Any errors will be printed out in the command line.
npm run lint:stylelint:fix: This command is equivalent to npm run stylelint. Any errors that can be fixed automatically will be fixed by this command; any other errors will be printed out in the command line.
npm run lint:markdownlint: This command will lint all markdown files in the src folder. Any errors will be printed out in the command line.
npm run lint:markdownlint:fix: This command is equivalent to npm run markdownlint. Any errors that can be fixed automatically will be fixed by this command; any other errors will be printed out in the command line.

Debuging:

npm run test:cc-webpack npm run test:cc-webpack:dev npx webpack --env test[=raw] --env plugins.WebpackBar=false --mode [production|development]

This will print the Webpack configuration generated by cc-webpack and some other details.

If you specify the keyword raw no ANSI escape codes for colorizing will be used in the output.

Script available from version 4. ↩