Explicitly Define an Entry Point with a webpack Configuration File
We could use webpack without any configuration and that would bundle our JavaScript, but our options will be limited. In this lesson, we'll create a webpack configuration file and we’ll explicitly define the entry point, and some output options as a starting point to build on.
Instructor: [00:00] Webpack works out of the box with sensible defaults, but if we want greater control over how webpack works, we can configure it with a webpack.config.js file. I'm going to create one in the root of this project. We'll call that webpack.config.js.
[00:18] I'm going to start with module.exports, and I'm going to set that to equal an object. That object is going to start with an entry property. Entry is going to be the relative path to our entry file. It'll be source/index.js.
[00:37] Webpack will pick up on this by default, but since we have a configuration file, let's be explicit about everything, so that it's easier to look at this project and discover what's going to happen.
[00:48] Next, we'll add an output key. It'll be output, and output is going to be an object. This object is going to contain the settings for our output.
[00:56] The first setting is going to be path. This needs an absolute path to where we want to output our file. We can't just come in here and say dist. To make this work, we're going to define, up at the top, const path. That's going to be a call to require. We're just going to pull in nodes path module.
[01:19] We can use path.join. There's a global in node called __dirname, with double underscore in front of it. This'll give us our current directory. That'll be the root of our project. Then we can come in here and we can specify dist.
[01:36] Then the second argument here is going to be the filename for our output. By default, this'll be main.js. I'm going to call it at.bundle.js.
[01:47] With that done, I'm going to save the file. I'm going to come up here I'm going to get rid of this old dist directory that has main.js from my last build.
[01:54] I'm going to go into the terminal. I'm going to say npm run build. It's going to run webpack, and we'll see that it builds both the greet and index modules. Our dist directory is back. This time, instead of main.js, we have at.bundle.js.
[02:19] Webpack has automatically picked up this webpack.config file based on its name alone. Then it's going to use these settings to decide how it's going to output our bundle.
Why is it that in index.js we can use the
importkeyword (import greeting from './greet’;) but in webpack.config.js we can’t, we have to userequire. I triedimport path from 'path’;and `import * as path from 'path'; and both threw errors.
It’s because the webpack config is being run in a node process and node uses require to import modules. The code intended to run in a browser uses ES module syntax and is transformed with Babel into code that will work in a browser environment.
Cool thanks
Hello, don't you need to specified "mode" in your webpack.config.js ?
Hello, don't you need to specified "mode" in your webpack.config.js ?
We cover mode in the next video
Why is it that in index.js we can use the
importkeyword (import greeting from './greet’;) but in webpack.config.js we can’t, we have to userequire. I triedimport path from 'path’;and `import * as path from 'path'; and both threw errors.