Skip to content

CodeCoupler Webpack Archive Version 3

Configuration Reference

You have two places in which you can modify the resulting webpack configuration:

  1. webpack.cc-config.js: Set certain options that are taken into account when building the webpack configuration.
  2. webpack.config.js: Into the classic webpack configuration file you can override every single property of the resulting configuration, or add new ones. Entries in this file take precedence4.

In the webpack.cc-config.js you can define some parameters to adjust the base cc-webpack configuration.

The dynamically created configuration can be controlled via a file named webpack.cc-config.js. If you use a Webpack configuration file webpack.config.js the both configurations will be smart-merged.

Removed or changed in version 4:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
module.exports = {

  bundle: {

    // Renamed to manifestSubfolder
    faviconSubfolder: String,

    // Moved to loaders.asset_test
    assetsTest: Regex,

  },

  staticParser: {

    // Moved to manifest.favicon
    favicon: String,

    // If true the source image of the favicons will be copied into the dist folder.
    // Default: false (Till Version 3.2.2: true)
    keepFaviconSource: Boolean

    // Moved to manifest.overrides
    manifest: String,

    // If true the override manifest file will be copied into the dist folder.
    // Default: false (From Version 3.3)
    keepManifestSource: Boolean

  },

  // Settings in "production" manage special setting that will be used in production mode.
  production: {

    // Moved to banner (top level)
    banner: String

  },

};

Commands Reference

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 CodeCoupler Webpack CLI 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.

If any of the build commands fail cc-webpack will return the exit code 1 1.

This is command reference of cc-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.

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 [raw] [--mode production]

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.

General Output Options:

--quiet

Setting this option no progress bar and no result will be shown. Error will still shown. 2

--cwd

Set current working directory in which the project resides which should be compiled. Useful to start cc-webpack from another place. 2

--devtool <devtool>

Override the webpack devtool which generates the source map (See: https://webpack.js.org/configuration/devtool/). 3

--stats <filename>

Generate a stats json file to analyze the bundle (See https://webpack.js.org/api/stats/). Do not work in combination with --watch. 3

HowTo: Analyze Bundle

1
2
npm run build:dev -- --stats dist/stats.json
npx webpack-bundle-analyzer dist/stats.json

Or

1
2
npm run build:dev -- --devtool source-map
npx source-map-explorer dist/YOUR_BUNDLE_NAME.js dist/YOUR_BUNDLE_NAME.js.map

  1. The exit code 1 will be returned from version 3 ↩

  2. The options --quiet and --cwd exists from version 3 ↩↩

  3. The options --devtool and --stats exists from version 3.7 ↩↩

  4. From 2.5 the precedence works correctly. ↩