Key Concepts

Review core concepts you need to learn to master this subject

Webpack Entry/Exit Points

const path = require('path'); module.exports = { entry: './source/input.js', output: { filename: 'output.js', path: path.resolve(__dirname, 'built'), } }

Webpack requires an entry point which defines the main program of the application where bundling should begin from. Webpack’s default entry point is src/index.js, which will be used when the config file does not specify an entry point.

The exit point defines where Webpack will store the bundled output. If no exit point is defined, Webpack will store its output in dist/main.js.

Both the entry and exit points can be defined in the config file.

Building Apps with Webpack
Lesson 1 of 1
  1. 1
    It’s time to practice using build tools! We’ll use one of the most popular build tools, Webpack, to bundle: * JavaScript files * stylesheets * images * fonts * text fil…
  2. 2
    In this exercise, we will set up a Webpack project starting from an empty folder. #### Set Up package.json Webpack is a Node package. To use Node packages, we need a package.json which ho…
  3. 3
    In this exercise, we will use Webpack to process a single JavaScript file in our project. Big files take longer to load. However, as projects get bigger and more complex, they require a lot of cod…
  4. 4
    In this exercise, we practice using Webpack to bundle multiple JavaScript files. Take a look at the file structure of our project on the right by clicking on the folder icon. Our src directory…
  5. 5
    So far, we have been using Webpack without any configuration or settings. Let’s start customizing Webpack! Webpack automatically looks for a configuration file named webpack.config.js. We def…
  6. 6
    In this exercise, we will use the configuration file to change where Webpack looks for files to bundle and where it places its output. So far, we have used Webpack’s default entry point of **./src…
  7. 7
    In this exercise, we will use a tool called webpack-dev-server to preview our code and update it as we make changes. We would first install webpa…
  8. 8
    In this exercise, we will introduce Webpack’s rule system and practice defining a rule for dealing with .txt files in our project. Webpack uses rules to know what to do with different file …
  9. 9
    Let’s add CSS stylesheets into our Webpack project. The test configuration option for CSS follows the same structure as the .txt file rule: test: /.css$/i While we import .txt files as…
  10. 10
    Let’s take a look at how images can be bundled with Webpack. Since Webpack 5, images and fonts no longer need a loader, and can use Webpack’s asset system. Their rules are similar to that of **.t…
  11. 11
    In this exercise, we add fonts to our project. The font rule is similar to the image rule: { test: /.ttf$/i, type: ‘asset/resource’ } The above rule would handle fonts in the .ttf form…
  12. 12
    Great job! You have learned to build many file types into a project using Webpack! Let’s review what you’ve learned so far: * Webpack is a popular tool making web resources into an efficient bund…

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo