Buy

Since we programmers are famously lazy, we don't usually run Webpack with all these cumbersome command-line options. Nope, we put them into a configuration file. At the root of your project, create a new webpack.config.js file. If you make a file with exactly this name, Webpack will automatically find it.

And what does this file look like? Oh, you're going to love this: we use, yep module.exports to export a configuration object!

8 lines webpack.config.js
module.exports = {
... lines 2 - 6
};

Inside, that config needs two major things. First, an entry key set to ./web/assets/js/RepLogApp.js:

8 lines webpack.config.js
module.exports = {
entry: './web/assets/js/RepLogApp.js',
... lines 3 - 6
};

Entry is Webpack's name for your input file: the one file it will load. Second, of course, we need to tell Webpack where to create the output. Set this to a hash with path set to the directory: __dirname plus /web/build:

8 lines webpack.config.js
module.exports = {
entry: './web/assets/js/RepLogApp.js',
output: {
path: __dirname+'/web/build',
... line 5
}
};

That __dirname is a special variable available inside of Node that points to the directory of this file. Then, add a filename key set to rep_log.js:

8 lines webpack.config.js
module.exports = {
entry: './web/assets/js/RepLogApp.js',
output: {
path: __dirname+'/web/build',
filename: 'rep_log.js',
}
};

Now, running Webpack is truly a lazy experience... we should probably lift our cat a few times for exercise. Just run:

./node_modules/.bin/webpack

And it works exactly like before.

Using the path module

Before we celebrate too much, head to webpack.js.org. Make sure you're here, and not on webpack.github.io - that's the old website for the old version 1 of Webpack. We're using the hipster version 3... and new versions of Webpack tend to come out fast. If there is already a new version when you're going through this tutorial, don't worry too much: there's a good chance the changes are minimal. And we'll add notes otherwise.

Under the main Concepts page, they talk about this configuration file. But check it out: for the output path, they use some path.resolve() thing.

This is a minor detail in Node that I want you guys to see. In Node, you never see path strings concatenated together like this. Nope, to keep things portable between Unix and Windows, you're supposed to call path.resolve() - or a similar function path.join() - to concatenate the path for you.

No big deal! Add path.resolve() passing it __dirname, then web then build:

8 lines webpack.config.js
module.exports = {
... line 2
output: {
path: path.resolve(__dirname, 'web', 'build'),
... line 5
}
};

You can pass as many arguments as you want: the args are built into one big path string.

Simple! But... does it work!? Try it:

./node_modules/.bin/webpack

Ah! An error!

path is not defined

Listen up! This is important: webpack.config.js is executed by Node... and this code will never run in our browser. So since this is a pure Node script, we can use any of the core libraries that you normally have access to, like the path module.

But to get access to it, you need to require it. At the top, add const path = require('path'):

10 lines webpack.config.js
const path = require('path');
module.exports = {
... lines 4 - 8
};

Now, everything is happy again!

Requiring Core or Vendor Modules

But notice, this is not ./path! The ./ would tell Node to look for a file relative to this file. But when we just say path, Node looks for either a core module inside the language itself called path - which is what happens in this case - or for a module called path inside node_modules. We'll see that very soon.

Making PhpStorm work with Node

Ok, but my editor isn't very happy: when I hover over path, it looks like there's an error:

Node.js coding assistance is disabled

Ok, that sounds like something we can improve! Open up the PhpStorm Preferences, which is Command+, on a Mac. Then, search for Node.js. Ah, there's a section called "Node.js and NPM". Find that "Enable" box and click it! Then hit Ok to exit.

And in a moment, yep! PhpStorm is happy again. And now, we will have auto-complete on core Node features.

Ok, next, we'll teach Webpack to watch for changes... and start installing and requiring vendor libraries - like jQuery - via Yarn.

Leave a comment!

  • 2017-08-12 weaverryan

    Hey J.R. Jenkins!

    Ah, very good! I believe the answer is yes: unlike PHP, in Node, the / versus \ DOES make a difference (whereas in PHP you can use / and it'll work on Windows for file paths). So yes, I expect that the / will cause problems on Windows. But, you need to ask whether or not you need the portability. The *real* reason I showed path.resolve() was to talk about path() and requiring core modules. Honestly, I'm not sure why they show path.resolve in some places, but not others - this may help solve some edge-case issue, but I'm not aware of anything.

    Anyways, not a completely concrete answer, but hopefully it helps :).

    Cheers!

  • 2017-08-10 J.R. Jenkins

    if we are using path.resolve() to make the webpack.config.js file platform independent, should we use that when building the entry configuration as well? I don't see that in the example on webpack.js.org, but it seems like we would have to worry about path issues on input as much as output.