Skip to content

CodeCoupler Webpack Hello World

Prepare Boilerplate

If you use the boilerplate you should adjust the fields name, author and license (and maybe other fields) in package.json.

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

Writing Code

After setup you can start writing your code in the directory src.

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, stylesheets etc.

All the files inside of the src directory will be compiled to work with all browsers specified in the .browserslistrc. The files inside of the directory static will just copied and html files will be injected with code pointing to the compilation result of the src directory.

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

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

document.write("Hello World");

Watch Changes

If running npm start the Webpack dev server will start watch all the used files in the src directory and all changes in the static directory (modifying, adding, deleting files) 1. Changes will trigger a rebuild and a page reload.

Now start a terminal and type:

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.

Build

Start the compilation with:

npm run build

With this command the compilation will start and a directory dist will appear. Inside of this directory you will see a compiled .js file an index.html and a manifest 2 directory. If you load the index.html in your browser you will see your message again.

Publish

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

If you want to write a library for other developers to use, you may have to do some modifications which will be explained in a separate chapter.

Update

All build outputs (JS, CSS, Asset files) will be copied to the destination directory with a filename containing a hash value 3. This allows us to always use the most recent files in the browser when updating.

So whenever you want to update your application on your server just copy the dist directory again and overwrite an files.

The only thing you have to pay attention to is that the index.html file is never cached by the browser.

If you use the boilerplate the dist directory already contains a .htaccess file that serves as an example for use in an Apache server. For other servers, there is a good overview in a Stack Overflow answer: https://stackoverflow.com/a/2068407 (Local Copy).

To get an overview, we recommend you to take a look at the walkthrough.

  1. Watching of changes in the static directory only works from version 2.4 upwards. ↩

  2. Till 3.2.2 the default name of the directory was favicon ↩

  3. Till 3.4 the JS and CSS files did not contain an hash value ↩

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