Codecademy Logo

Learn Build Tools

What are Build Tools?

Build tools aid in improving performance, improving development productivity, or automating tasks.

Build Tools can assist with:

  • combining JavaScript modules and CSS into bundled files for production
  • minifying files for improved performance
  • running unit tests with one command
  • automatically previewing changes to your application

The Web Development Ecosystem

The web development ecosystem is the set of technologies used to create web applications and the interactions between those technologies. It can be broken down into three stages: development, testing, and deployment.

When to use Build Tools

Build tools are most helpful for complex projects that involve various types of resources. Not every web app will require build tools.

Test Runners

Task runners, such as Grunt and Gulp.js, are build tools that can automate workflows.

What are Bundlers?

Bundlers, such as Webpack and esbuild, are used to package JavaScript files and other assets such as stylesheets, images, and fonts into bundled files for distribution of the web app. Bundlers also remove unused and duplicated code, improving efficiency.

What is a Dependency Graph?

A dependency graph is a type of data structure formed by a directed graph representing the relationship between different files. When one file depends on another, a connection is added to the graph. Bundlers, such as Webpack, need to create dependency graphs to map how assets are linked to each other to produce an output containing everything the app needs starting from an entry point.

How Can Build Tools Improve Performance?

Build tools can improve web application performance through processes such as code splitting, minification, dead code elimination, tree shaking.

Webpack Entry/Exit Points

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.

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

Webpack Rules

Webpack rules define how content should be bundled into the project output.

Rules have a test option to specify a pattern of filenames that the rule should be applied to.

If the file type needs a loader to be bundled, the rule will contain a use option with the correct loader(s). If the file type can be incorporated with Webpack 5’s asset system, a type option will be specified.

rules: 
[
  {
    test: /\.css$/i,
    use: ["style-loader","css-loader"]
  },
  {
    test: /\.png$/i,
    type: "asset/resource"
  },
  {
    test: /\.txt$/i,
    type: "asset/source"
  }
]

Defining a Build Command

When working with a Node.js project, developers will typically define a build command in the package.json. The build command will run commands that prepare the project to be served to the users. Defining the build command standardizes this preparation process regardless of the tools being used.

"scripts": {
  "build": "webpack --watch"
}

Previewing Webpack Builds

Combining webpack-dev-server and Webpack’s watch mode is a powerful way to preview changes to your application as you save them. The watch mode waits for file changes and rebuilds the application when needed, while webpack-dev-servers serves a local preview of your builds in the browser.

"scripts": {
  "build":"webpack --watch",
  "start":"webpack serve"
}

Bundling CSS with Webpack

Webpack uses two loaders, css-loader and style-loader to add and apply CSS to the web content. The css-loader inserts the CSS into the JS code, and style-loader takes the output of css-loader and inserts it into a <style> tag in the HTML. Webpack applies loaders from right to left, so in the rule for CSS files, style-loader is the first element in the array of loaders, and css-loader is second. 

{
  test: /\.css$/i,
  use: ['style-loader', 'css-loader']
}

Webpack’s Asset System

Rather than using loaders, text files, images, and fonts are bundled via Webpack’s asset system. Filetypes that utilize the asset system have a type configuration option rather than use. Text files are set to the source type, which incorporates the content of the file directly into JavaScript. Fonts and images commonly use the resource type, which imports the files using a URL specification.

module.exports = {
  module: {
    rules: [
      {
        test: /\.txt$/i,
        type: 'asset/source'
      },
      {
        test: /\.png$/i,
        type: 'asset/resource'
      },
      {
        test: /\.ttf$/i,
        type: 'asset/resource'
      }
    ]
  }
}
Previous
0