Webpack is easy

Webpack is amazing 🚀. People use it in daily bases. It’s saves developer time bringing a really powerful interface to make anything you want to your code.

As always, there is a big BUT.

I have seen too many complains about how complicated is to create a webpack config for a simple project.

And like this… tons of people saying the same.

I will tell you something… this is just wrong thinking.

My answer to this would be:

webpack is partly complicated because it’s incredibly powerful.

I work with webpack everyday, and I can see it complicated if you haven’t seen a webpack config your entire life 😂, but my thought is, once you know some little concepts, you are more than ready to go.

Webpack is a tool for bundling assets, that is clear. I provides the ability of automatise any modification you want to do to the code before making your bundle.

Also, it’s built in a way that you can easily perform and make your bundles smaller, or even lazy load your code as the user goes through your application.

Webpack is a platform. With no doubt it saves developer time, and this is thanks to the work of its community around, making new plugins and loaders that makes people's life easier.

In this series of posts, I want to convince you that webpack is not as complicated as they said, and make you see that its process and configuration is so easy.

This first one is an introduction of the simple and basic configuration, so let’s get hands on 🙌, and make a webpack config from scratch.

Requirements ✍️

Create a new project

Let’s create a new folder and go inside it:

$ mkdir easy-webpack-config
$ cd easy-webpack-config

Next step is to initialise npm:

$ npm init

It will get you through a process where you might be asked questions, such as name of your project, description, version and… is that ok? YES.

Once it finishes, it will transport all your answers to a package.json file, which we will need to install some dependencies.

What do I need to install?

• webpack for production builds.
• webpack-dev-server for development builds.

webpack-dev-server is a way of serving your files for development, but also to make those modifications that are written into your webpack config, all together.

$ npm install webpack webpack-dev-server --save-dev

Done ✨.

You can see that now package.json have your devDependencies ready to be use.

"devDependencies": {
  "webpack": "^2.3.1",
  "webpack-dev-server": "^2.4.2"
}

How do I run webpack?

We said that we were going to use webpack-dev-server for development and webpack for production right, so… Let’s use package.json scripts to make that happen.

Add the following lines to “scripts”.

{
  "name": "easy-webpack-config",
  "version": "1.0.0",
  "description": "Webpack is easy",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --env.development", 
    "prod": "webpack --env.production"
  },
  "author": "Alejandro",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^2.3.1",
    "webpack-dev-server": "^2.4.2"
  },
  "author": "Alejandro",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^2.3.1",
    "webpack-dev-server": "^2.4.2"
  }
}

Now, go to the console and execute.

Remember that in this case we don’t need to specify a configuration file when we run it, because by default, webpack will look for webpack.config.js in the root folder of your project.

$ npm run dev
No configuration file found and no entry configured via CLI option.
When using the CLI you need to provide at least two arguments: entry and output.`
A configuration file could be named 'webpack.config.js' in the current directory.
Use --help to display the CLI options.

😞 Ups! It fails. Oh! So this is saying we are missing a very important part of our configuration, the actual configuration. ¯\_(ツ)_/¯

Create a file called webpack.config.js and start by writing some configuration on it.

Party time! 🎉

It’s time to configure your webpack config.

This file needs to export an object (notice that it can be also a function returning an object, in case you need to manipulate the configuration before returning it).

This object needs some required properties to be able to work:

• entry: Path or paths to the file or files where your application should start from.

Depends whether if you need one or more entry points, it will be a single string or an object with named entries.

For this example we will only use a single entry.

module.exports = {
    entry: './index.js'
};

• output: Is the configuration object that will express how your output files looks like.

module.exports = {
    entry: './index.js', 
    output: {}
};

• output.filename: name of your file or files, you can use the [name], [id], [hash], [chunkhash], so in case you have different entries, you can call the file for example[name].bundle.js where name is the key of your entry.

If you have only one entry, as it’s on our case, the entry is named main by default.

module.exports = {
    entry: './index.js', 
    output: {
        filename: '[name].bundle.js'
    }
};

• output.path: This is the folder where all this entries files are going to be exposed to.

module.exports = {
    entry: './index.js', 
    output: {
        filename: '[name].bundle.js', 
        path: __dirname
    }
};

• output.publicPath: Refers to the path where your html is going to look for the file.

module.exports = {
    entry: './index.js', 
    output: {
        filename: '[name].bundle.js', 
        path: __dirname, 
        publicPath: __dirname
    }
};

🎉

Fine, so… that’s it. That’s all you need to do. Now let’s run it in development.

$ npm run dev
> easy-webpack-config@1.0.0 dev /Users/aanglada/Projects/easy-webpack-config
> webpack-dev-server --env.development
Project is running at http://localhost:8081/
webpack output is served from /Users/aanglada/Projects/easy-webpack-config
Hash: de8cee1e7b8107f3cb7c
Version: webpack 2.3.2
Time: 781ms
         Asset    Size  Chunks                    Chunk Names
main.bundle.js  313 kB       0  [emitted]  [big]  main
chunk    {0} main.bundle.js (main) 299 kB [entry] [rendered]
   [35] ./index.js 90 bytes {0} [built]
   [36] (webpack)-dev-server/client?http://localhost:8081 5.44 kB {0} [built]
   [37] ./~/ansi-html/index.js 4.26 kB {0} [built]
   [38] ./~/ansi-regex/index.js 135 bytes {0} [built]
   [40] ./~/events/events.js 8.33 kB {0} [built]
   [41] ./~/html-entities/index.js 231 bytes {0} [built]
   [48] ./~/querystring-es3/index.js 127 bytes {0} [built]
   [51] ./~/sockjs-client/lib/entry.js 244 bytes {0} [built]
   [77] ./~/strip-ansi/index.js 161 bytes {0} [built]
   [79] ./~/url/url.js 23.3 kB {0} [built]
   [80] ./~/url/util.js 314 bytes {0} [built]
   [81] (webpack)-dev-server/client/overlay.js 3.6 kB {0} [built]
   [82] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
   [84] (webpack)/hot/emitter.js 77 bytes {0} [built]
   [85] multi (webpack)-dev-server/client?http://localhost:8081 ./index.js 40 bytes {0} [built]
     + 71 hidden modules
webpack: Compiled successfully.

webpack-dev-server will run for you and will serve the files (main.bundle.js in this case) at http://localhost:8081 (which uses publicPath), easy right? Now you just need to point them out from your html and start using them.

Production build

Simply running prod script command… 🚀

$ npm run prod
> easy-webpack-config@1.0.0 prod /Users/aanglada/Projects/easy-webpack-config
> webpack --env.production
Hash: ca488b369e85cfe1edb8
Version: webpack 2.3.2
Time: 63ms
         Asset     Size  Chunks             Chunk Names
main.bundle.js  2.76 kB       0  [emitted]  main
   [0] ./index.js 90 bytes {0} [built]

webpack will run and create the files in the directory you specified above on path.

Conclusion

Webpack is easy. As any other tool, it gets more complicated as you want to do more complicated stuff. But knowing this simple concepts, you are more than ready to start developing.

All the code in this article is on this repo.

aganglada/easy-webpack-config

Also made some repose that will help you start your development process in 1…2…3…

aganglada/preact-minimal

aganglada/react-minimal

What’s comming

This is a series of articles to help you configure webpack more easily, so I will show you everything you want to know about it.

• Loaders and Plugins
• Aliases
• Performance
• Code splitting
• Tree shaking

You can also tell me what do you want to read next.

Follow me on twitter and medium to get more webpack and frontend updates:

👨‍🚀 twitter @aganglada

✍️👨‍🚀 Alejandro Garcia Anglada

Thanks for reading! 👏