Building Apps with Webpack

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'
      }
    ]
  }
}