Skip to content

How to Build

To run CodeCoupler Webpack Commands you can use the script shortcuts defined in the package.json. If you did not initialized your project with npm init cc-webpack you can use the provided binary cc-webpack.

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

Production Build

npm run build (shortcut), npx cc-webpack --mode production

This command will build the final JavaScript library, the Stylesheet File and copy and process the files from the static folder. All minified, mangled and with source maps in separate files.

You can setup some parameters in the webpack.cc-config.js for the production build:

  • production.banner: Banner to add to your final JavaScript file. Usefull for licence and version informations. The default webpack.cc-config.js contains an example which extracts the most important informations from package.json.

npm run build:watch (shortcut), npx cc-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.

Development Environment

The following commands will build the library in development mode. Some features will be disabled for better compiling perfomance and easier debuging:

  • JavaScript, CSS and HTML will not minified or mangled.
  • SourceMaps will be inlined.
  • Only one simple favicon will be created.

npm start (shortcut), npx cc-webpack --devserver --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.

You will not see the building results in the dist folder, because the the server keeps bundle files in memory and serves them as if they were real files mounted at the server's root path.

Within this environment you can develop your library.

npm run watch (shortcut), npx cc-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 (shortcut), npx cc-webpack --mode development

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

CDN Versions

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 (shortcut), npx cc-webpack --devserver --externals-cdn --mode development

Development Server running with CDN build.

npm run watch:cdn (shortcut), npx cc-webpack --watch --externals-cdn --mode development

Watching mode with CDN build.

npm run build:dev:cdn (shortcut), npx cc-webpack --externals-cdn --mode development

Just build a CDN version in development mode.

npm run build:cdn (shortcut), npx cc-webpack --externals-cdn --mode production

Final production CDN build.

npm run build:watch:cdn (shortcut), npx cc-webpack --watch --externals-cdn --mode production

Watching mode with final production CDN build.

Linting Tools

npm run lint (shortcut), 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 (shortcut), 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 or npm run lint:light:fix (shortcut), 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 or npm run tslint:fix (shortcut), 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 or npm run jslint:fix (shortcut), eslint ./src/**/*.js --quiet [--fix]

These both commands run only ESLint through all the .js files in the src folder.

npm run vuelint or npm run vuelint:fix (shortcut), eslint ./src/**/*.vue --quiet [--fix]

These both commands run only ESLint through all the .js files in the src folder.

npm run csslint or npm run csslint:fix (shortcut), npx stylelint ./src/**/*.css [--fix]

These both commands run only stylelint through all the .css files in the src folder.

Debuging cc-webpack

npm run test:cc-webpack or npm run test:cc-webpack:dev (shortcut), npx cc-webpack --test [--mode production]

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