Skip to content

CodeCoupler Webpack Hello World

Prepare Boilerplate

If you use the boilerplate you should adjust the fields name, author and license (and possibly 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 the setup is complete, you can start writing code in the src directory.

Note that only the file src/index.js will be used as the single entry point. Start writing your code here and import all the necessary 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 in the directory static will simply be copied, and html files will be injected with code pointing to the compilation result of the src directory.

One last important note: Do not put anything in the directory dist. This directory will be wiped every time you compile. Only use the directories src and static.

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

document.write("Hello World");

Watch Changes

When you run npm start the Webpack dev server starts watching all the files used in the src directory and all changes to the static directory (modifying, adding or deleting files) 1. These changes will trigger a rebuild and a page reload.

Now start a terminal and type:

npm start

The compilation will start, and then a browser will open. You should now see the message "Hello World".

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

Build

Start the compilation with:

npm run build

This command will start the compilation and create a directory called dist. Inside 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 ready to write a front-end application 4. You can build the resulting dist directory right away with npm run build and deploy. Inside, you will find the final .js, .css, and .map static files, as well as any other necessary files. The contents of the dist directory must be published on a web server where the html files can be accessed.

If you want to write a library for other developers to use, you may need to make 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 whenever we update.

Whenever you want to update your application on your server just copy the dist directory again and overwrite any files.

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

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

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

  1. Changes to the static directory can only be monitored from version 2.4 onwards. ↩

  2. Until version 3.2.2, the directory's default name was favicon ↩

  3. Until version 3.4, the JS and CSS files did not contain a hash value. ↩

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