CodeCoupler Webpack Configuration Factory Commands

No dependencies need to be installed for any of the following commands. They are already installed, and the generated Webpack configuration supports 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 usual. Below, all the scripts from the above package.json are listed alongside their corresponding Webpack CLI commands.

One quick note about the option --mode: If not set, the default value is development and not production as it is in Webpack.

Override CodeCoupler Webpack Configuration from CLI

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

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

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

To run a build, for example, you would use the following command:

npx webpack

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

{
  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 as "true" or "false" 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 open the browser pointing to the server. Each time you modify your code, the page will reloaded automatically.

npm run watch npx webpack watch --mode development

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

You can use this environment if you need to use a server other than 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 remain active after the production build in the watch mode and will recompile whenever a source file is modified.

CDN Builds:

Instead of copying to the dist folder,you can build your code to include CDN links to your external modules 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: Simply 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 displayed in the console.
npm run lint:fix: This command is equivalent to npm run lint. It will automatically fix any errors that can be fixed and display any other errors in the console.
npm run format: This command will only format all the script, stylesheet, and Markdown files in the src folder. Any errors will be displayed in the console.
npm run format:fix: This command is equivalent to npm run format. It will automatically fix any errors that can be fixed and display any other errors in the console.
npm run lint:eslint: This command will lint all the script files in the src folder. Any errors will be displayed in the console.
npm run lint:eslint:fix: This command is equivalent to npm run eslint. It will automatically fix any errors that can be fixed and display any other errors in the console.
npm run lint:stylelint: This command will lint all the stylesheet files in the src folder. Any errors will be displayed in the console.
npm run lint:stylelint:fix: This command is equivalent to npm run stylelint. It will automatically fix any errors that can be fixed and display any other errors in the console.
npm run lint:markdownlint: This command will lint all Markdown files in the src folder. Any errors will be displayed in the console.
npm run lint:markdownlint:fix: This command is equivalent to npm run markdownlint. It will automatically fix any errors that can be fixed and display any other errors in the console.

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.

Specifying the keyword "raw" will prevent the use of ANSI escape codes for colorizing in the output.

Script available from version 4. ↩