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.
If any of the build commands fail cc-webpack will return the exit code 1 1.
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:
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