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 |
|
Now start a terminal and type:
1 |
|
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 |
|
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 |
|
- If you publish a scoped package execute this in your package directory:
1 |
|
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 |
|
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 |
|
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 |
|
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 |
|
The content of dist
folder have to be published on a webserver where the html
files can be
accessed.