CodeCoupler Webpack Commands Reference

To run commands for compiling, testing, linting etc. you can use the script shortcuts defined in the package.json if you use the boilerplate initialized with npm init cc-webpack. If you do not use the boilerplate you can use the Webpack CLI as usual.

Below are all scripts from the package.json listed with the corresponding webpack cli commands. This is a good overview of what options you have.

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 will call normaly the CodeCoupler Webpack generator function like this:

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

The first argument is the CodeCoupler Webpack configuration that should be used. The second argument is also a configuration that can be used to override with the Webpack CLI argument --env.

For example to run a build you would use:

npx webpack

To override the following CodeCoupler Webpack configuration settings:

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

You can do the following:

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

Assigned values noted with "false" or "true" will be converted to boolean values. All other values are strings (or boolean "true" of ommited). Read more about the --env argument.

Scripts Overview

Development Builds:

npm start 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 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 webpack --mode development

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

Analyze Builds:

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

Production Builds:

npm run build webpack --mode production: Start the production build.
npm run build:watch 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 webpack serve --env cdn.enabled --mode development: Development Server running with CDN build.
npm run watch:cdn webpack watch --env cdn.enabled --mode development: Watching mode with CDN build.
npm run build:dev:cdn webpack --env cdn.enabled --mode development: Just build a CDN version in development mode.
npm run build:cdn webpack --env cdn.enabled --mode production: Final production CDN build.
npm run build:watch:cdn webpack watch --env cdn.enabled --mode production: Watching mode with final production CDN build.

Linting Tools:

npm run lint
tsc --noEmit && eslint ./src/**/*.{js,ts} --quiet && npx stylelint ./src/**/*.css: This command will first run the TypeScript compiler and report any TypeScript compiler errors. If there are no TypeScript errors, it will then run ESLint through all the .js, .vue and .ts files in the src folder. If there are no ESLint errors, it will then run stylelint through all the .css files in the src folder. Any errors will be printed out in the command line.

npm run lint:fix
tsc --noEmit && eslint ./src/**/*.{js,ts} --quiet --fix && npx stylelint ./src/**/*.css --fix: This command is the same as npm run dev:lint. But any ESLint and stylelint errors that can be automatically fixed will be fixed with this command, but any other errors will be printed out in the command line. Any TypeScript or ESLint error will stop further execution.

npm run lint:light
npm run lint:light:fix
eslint ./src/**/*.{js,ts} --quiet [--fix] && npx stylelint ./src/**/*.css [--fix]: These both commands works exactly like npm run lint and npm run lint:fix but without the TypeScript compiler. Usefull for projects without TypeScript files because the TypeScript complier throws an error if no TypeScript files was found.
npm run tslint
npm run tslint:fix
tsc --noEmit && eslint ./src/**/*.ts --quiet [--fix]: These both commands run only the TypeScript compiler and report any TypeScript compiler errors. If there are no TypeScript errors, it will then run ESLint through all the .ts files in the src folder.
npm run jslint
npm run jslint:fix
eslint ./src/**/*.js --quiet [--fix]: These both commands run only ESLint through all the .js files in the src folder.
npm run vuelint
npm run vuelint:fix
eslint ./src/**/*.vue --quiet [--fix]: These both commands run only ESLint through all the .js files in the src folder.
npm run csslint
npm run csslint:fix
npx stylelint ./src/**/*.css [--fix]: These both commands run only stylelint through all the .css files in the src folder.

Debuging:

npm run test:cc-webpack npm run test:cc-webpack:dev 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. ↩