Skip to content

CodeCoupler Webpack Setup

CodeCoupler Webpack will lint and fix JavaScript, Vue and TypeScript files by ESLint and Prettier, Stylesheet files by stylelint. The integrated boilerplate will generate the needed configuration files which make Visual Code to lint these files on save. To make this work you have to install the following extensions:

If you are developing with Vue:

Also recommended but not mandatory:

Initialize a new Project with Boilerplate

1
2
3
4
5
mkdir new-project-folder
cd new-project-folder
npm init @codecoupler/cc-webpack@latest # Use always the "latest" tag or you will use the last version you have downloaded
git init -b main                        # This is usefull because the next command will install git hooks
npm i

Before start working with this boilerplate the following fields should be set in package.json (read the documentation):

  • name
  • version
  • description
  • author
  • homepage
  • keywords
  • license (Add a LICENSE file in the root directory)

Then you could change the title of static/index.html and overwrite static/logo.png with your own logo.

Alternatively: Initialize without Boilerplate

Not recommended because many feature will not work, and you have to use the command line interface invoked with cc-webpack [options], but possible:

1
2
3
4
5
6
7
mkdir new-project-folder
cd new-project-folder
git init -b main
npm init
mkdir src
npm i @codecoupler/cc-webpack --save-dev
./node_modules/.bin/eslint --init

Alternatively: Adding to existing project

Not recommended on complex scenarios, but possible:

1
2
cd to/your/existing/project
npm i @codecoupler/cc-webpack -D

Prepare for Publishing to NPM

To publish your library or application to NPM you can do npm publish. To prevent an accidental publish the package is marked as private.

If you want to publish as public you have to:

  • Remove this from the package.json:
1
2
3
{
  "private": true
}
  • If you publish a scoped package execute this in your package directory:
1
npm config set access public

Deciding Application or Library

Depending on whether you are writing a web application that can be loaded in a browser or just a library for other developers to use, you may need to configure some settings.

The default configuration is almost ready to write a frontend application 2. You can right away build with npm run build and deploy the resulting dist folder. In there you will find the final .js, .css, .map, static files and and other needed parts. The content of dist folder have to be published on a webserver where the html files can be accessed.

To deploy a library you have to do some modifications which will be explained in First Steps Library.

  1. The package @codecoupler/create-cc-webpack up to version 2.1 was optimized for using Vetur. From version 2.2 it is optimized for Volar. ↩

  2. The default configuration up to version 3.3.1 was almost ready to write a library, not an application. ↩