Shortcuts

Typing out that long Webpack command is boring and opens us up to errors potentially being made (what if we mistype bundle.js and end up generating the wrong file?). Let’s simplify that process for our own sanity.

First, let’s decide that our index.js will be the entry point to our application, which means that it will require all the other files in the application (or rather, it will require a few files that require a few other files, which require a few other files, and so on).

Conversely, our bundle.js will be our output file, where all our bundled code goes.

Those two files, therefore, will always be the arguments we give to the Webpack command in our Terminal. Since they won’t change, let’s configure Webpack to always use them.

In our project folder (not in src, but the top-level folder), create a file called webpack.config.js. In it, put the following:

module.exports = {
  entry:  __dirname + "/src/index.js",
  output: {
   path: __dirname + "/public",
   filename: "bundle.js",
   publicPath: "/",
  }
};

We define our entry point as the path to the index.js (__dirname is a global variable which grabs the current directory, that is, wherever we run the command webpack). We then define our output file.

Now, we can simply run node_modules/.bin/webpack in our Terminal, with no arguments, and get the same results:

node_modules/.bin/webpack

A good improvement, but we’re developers, so we’re lazy and want to take even more shortcuts. Let’s shorten that node_modules/.bin/webpack command.

One of the cool features of npm is the ability to write scripts to perform commonly used tasks. Let’s try it out. In our package.json, create a scripts section; within that, make a script named build, with a value of the node_modules/.bin/webpack command:

{
  "name": "chatastrophe",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "node_modules/.bin/webpack",
  },
  "dependencies": {
    "react": "15.6.1",
    "react-dom": "15.6.1",
    "webpack": "3.5.4",
  }
}

Then, in the Terminal, you can run either npm run build or yarn build. They do the same thing: run the Webpack command and bundle our files!

Wow, our life is getting easier and easier. Could we be any lazier?

In short, yes.