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 VSCode 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

1
2
3
4
5
mkdir new-project-folder
cd new-project-folder
npm init @codecoupler/cc-webpack
git init # 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 (You could reference here to the AUTHORS file)
  • homepage
  • keywords
  • license
  • private (Remove it if this project should be public)

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

Last but not least a LICENSE file should be added and optionally an AUTHORS file.

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 write an web application which can be loaded in a browser or just a library which should be used by other developers a few settings have to be made.

Write a library

The default configuration is almost ready to write a library. If you write a library you can build with npm run build && npm pack and deploy the resulting .tar.gz file. In there you will find the final .js, .css, .map, and other needed parts. The consumer of your library have to link to the main .js and .css file.

If you do not want to deploy the maps, just remove the map entries in files in the package.json file.

To make your library working with import statements and package managers you have to add only one property into the package.json. Replace library-name.js with the own name of the library which is by default the package name defined in the property name.

1
2
3
{
  "main": "dist/library-name.js"
}

Accessing your library in browser environment

Your library will be accesible from a global variable named as your package name from the package.json converted into camel case (removing dashes, underscores, dots and tilde). The name of the variable can defined in the webpack.cc-config.js (bundle.libraryName).

1
2
3
4
5
6
<link href="your-library.css" rel="stylesheet" type="text/css" />
<script src="your-library.js" type="text/javascript"></script>
<script>
  YourLibrary.anyExportedEntityOfYourLibrary();
  let something = YourLibrary.anyExportedEntityOfYourLibrary();
</script>

Accessing your library in module environment

You library can be installed with npm your-library-name and exported methods can be imported as follows:

1
import { anyExportedEntityOfYourLibrary } from "your-library-name";

Write an Application

If you want to write an application you can 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.

If you want to use npm pack to deploy your application as one single .tar.gz file you must set the files directive in package.json to:

1
2
3
{
  "files": ["dist/"]
}

The content of dist folder have to be published on a webserver where the html files can be accessed.