Webpack for connected set ups

For a long time, I had the notion that webpack could only be ran for set ups that are independent from the back end. For example SPAs that only communicate with AJAX.

I closed my mind into thinking that it had to be ran with a development server. You would make the webpack config file and use that to run the dev server. That would do all the cool things like Hot Module Replacement and having all the JS in RAM so changes would be blazing fast. Then, when you needed to actually use it for production, you would do a build and be done with it.

I blame the tutorials and webpack docs partly, because when I started looking into webpack around 2 years ago all the examples where like what I mentioned before, independent set ups.

So the only time I used webpack was for personal projects. But on my professional projects I would use gulp with require/browserify/jspm whatever was in flavor besides webpack. Until I came across a project that used it the way I wanted to.

You can use webpack to develop in a set up where you have the back end connected with the front, for example with a templating language. All you need to do is define an input file and output directory in your webpack config. Then you run webpack -w and that’s it. It will watch for changes, and then do what it does, and throw it to the output directory you specified. After that, you just point to the output file in your template like <script src="./build/index.js" />. This project does just that, as simple as possible.

You won’t benefit from HMR, but at least you CAN use webpack for these connected set ups which are much more common in the professional world.

Webpack can be simple too.

Example

I went ahead and created a very simple example for you. Click here to download it through github.

Install dependencies:

run webpack:

this will bundle what’s in the entry file and its imports and output it in the /build directory.

Check out the changes by navigating to the index.html file, or start a server in the project’s root directory with:

Some info on the project

The javascript is simple, it just imports a module and calls it. This is to demonstrate what the core of webpack is all about: bundling.

So to get that code above to work, webpack needs to be set up:

This is all webpack needs to do its job. An entry place to your app, and where to output the generated bundle. That’s it.

All the other stuff, loaders, plugins, etc. are to enhance webpack, and accommodate to your needs of using babel, SASS, css modules, etc…

Understanding a Simple React, React-Router and Redux Application in ES2015. Includes Hot Module Replacement and much more.

In this post I will try to make you understand how a javascript react application with redux and react-router works and how they play together. We will be using this boilerplate.

Continue reading “Understanding a Simple React, React-Router and Redux Application in ES2015. Includes Hot Module Replacement and much more.”

What are Javascript Prototypes?

I’m writing this post on javascript prototypes to help me further understand what they are by documenting, or rather summarizing, what I read. I hope that by doing this I also help you understand the subject. Prototypes, the prototype chain, the new keyword, the ES6 class keyword, Object.assign will all be discussed.

Continue reading “What are Javascript Prototypes?”

Tutorial: Javascript ES6 (ES2015), get started quickly with babel v6+, Gulp, Browserify and Use Arrow Functions, Classes, Import syntax…

This post is an update to my old tutorial on how to start writing ES6 on the front end with babel.

Continue reading “Tutorial: Javascript ES6 (ES2015), get started quickly with babel v6+, Gulp, Browserify and Use Arrow Functions, Classes, Import syntax…”

Three dots in Javascript: How to use the Spread Operator and its use with Immutable Arrays

What are the three dots you see in javascript code snippets? The three dots are called the spread operator. It’s a new feature brought in with ES6.  In this post I will show you some examples where you can use it. I will then talk about how they are helpful for Immutability in your code.
Continue reading “Three dots in Javascript: How to use the Spread Operator and its use with Immutable Arrays”