CodeCoupler Webpack Setup
Recommended VSCode 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:
Remark: 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.
Also recommended but not mandatory:
Initialize a new project
1 2 3 4 5 |
|
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 |
|
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 |
|
- 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 |
|
If you want to export Vue applications do not forget to exclude Vue from the build result. This leads to complications if the target project use its own version of vue:
1 |
|
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.