Skip to content

CodeCoupler Webpack Getting Started

Basics

After setup you can start writing your code in the folder src and put asset files into the folder static. You can organize the files inside these folders as always you want.

Keep this in mind that only the file src/index.js will be used as single entry point. You should start here writing your code and import all the other needed modules and stylesheets.

A last important Note: Do not put anything into the folder dist. This folder will wiped everytime you compile. Use only the folders src and static.

Let's try an example. Put this code into the src/index.js:

1
document.write("Hello World");

Now start a terminal and type:

1
npm start

The compilation will start and right after that a browser. You should see now the ingenious message "Hello World".

If you go back into the editor, change the message and save the file the recompilation will start automatically and the browser reloads the page with your new message.

Let's stop this watch mode with Ctrl-C and type the following:

1
npm run build

The compilation will start and a folder dist will appear. Inside of this folder you will see a compiled .js file an index.html and a favicon folder. If you load the index.html in your browser you see your message again.

Prepare for Publishing

Push to GIT Repository

Before any commit, staged .ts, .vue, .js and .css files inside the src folder will be checked by the associated linter. If any of these checks fail (process exits with non-zero code), the commit will be aborted. So you have first to cleanup your code and your repository never receive ugly code.

If many files have to be fixed you can use the command npm run lint:fix to try to fix all the files at once automatically.

Note: GIT commits will ignore the dist, the node_modules folder and any packages generated by npm pack.

Publish 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.