Module

Configure how different module types are processed with rules and loaders

The module configuration determines how different types of modules within a project are treated. This includes configuring loaders, parser options, and generator settings.

Basic Configuration

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
};

Module Options

module.rules · array

An array of rules that are matched to requests when modules are created.

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

module.noParse · RegExp | RegExp[] | function | string

Prevent parsing of matched files. Useful for large libraries.

module: {
  noParse: /jquery|lodash/
}

module.parser · object

Parser options by module type.

module: {
  parser: {
    javascript: {
      commonjs: true,
      amd: false
    }
  }
}

module.generator · object

Generator options by module type.

module: {
  generator: {
    asset: {
      filename: 'assets/[hash][ext][query]'
    }
  }
}

Rule Configuration

Each rule can have the following properties:

Matching Conditions

test · RegExp | string | function | array

Match files by their resource path.

{ test: /\.js$/ }
{ test: /\.(png|jpg|gif)$/ }

include · RegExp | string | function | array

Include only these files/directories.

{ include: path.resolve(__dirname, 'src') }
{ include: [/src/, /lib/] }

exclude · RegExp | string | function | array

Exclude these files/directories.

{ exclude: /node_modules/ }
{ exclude: [/node_modules/, /vendor/] }

resource · condition

Match the resource path.

{ resource: { and: [/\.js$/, /src/] } }

resourceQuery · condition

Match the resource query string.

{ resourceQuery: /inline/ } // matches '?inline'

issuer · condition

Match the module that imports this module.

{ issuer: /\.js$/ } // imported by .js files

dependency · condition

Match by dependency type.

{ dependency: 'url' } // match url() in CSS

Loader Configuration

use · string | object | array

Apply loaders to the module.

// String
{ use: 'babel-loader' }

// Object
{ use: {
  loader: 'babel-loader',
  options: { presets: ['@babel/preset-env'] }
}}

// Array (applied right to left)
{ use: ['style-loader', 'css-loader', 'sass-loader'] }

loader · string

Shortcut for use: [{ loader }].

{ loader: 'babel-loader' }

options · object | string

Shortcut for use: [{ options }].

{
  loader: 'babel-loader',
  options: { presets: ['@babel/preset-env'] }
}

Module Type and Processing

type · string

Set the module type.

{ type: 'asset/resource' }

Types: 'javascript/auto', 'javascript/esm', 'javascript/dynamic', 'json', 'webassembly/async', 'webassembly/sync', 'asset', 'asset/source', 'asset/resource', 'asset/inline', 'css', 'css/module'

parser · object

Parser options for this rule.

{
  test: /\.js$/,
  parser: {
    amd: false,
    commonjs: true
  }
}

generator · object

Generator options for this rule.

{
  test: /\.png$/,
  type: 'asset/resource',
  generator: {
    filename: 'images/[hash][ext][query]'
  }
}

Rule Organization

enforce · 'pre' | 'post'

Specify loader category.

{
  test: /\.js$/,
  enforce: 'pre',
  use: 'eslint-loader'
}

Order: pre loaders → normal loaders → post loaders

oneOf · array

Only use the first matching rule.

{
  oneOf: [
    { resourceQuery: /inline/, type: 'asset/inline' },
    { resourceQuery: /external/, type: 'asset/resource' },
    { type: 'asset' }
  ]
}

rules · array

Nested rules that are applied when parent rule matches.

{
  test: /\.css$/,
  rules: [
    { use: 'css-loader' },
    { resourceQuery: /module/, use: 'css-modules-loader' }
  ]
}

Advanced Options

sideEffects · boolean

Flag module as having side effects.

{ test: /\.css$/, sideEffects: true }

layer · string

Specify the layer for this module.

{ test: /\.css$/, layer: 'styles' }

resolve · object

Resolve options for this rule.

{
  test: /\.ts$/,
  resolve: {
    extensions: ['.ts', '.tsx']
  }
}

Asset Modules

Webpack 5 includes built-in asset modules:

asset/resource

Emits a separate file and exports the URL:

{
  test: /\.(png|jpg|gif)$/,
  type: 'asset/resource',
  generator: {
    filename: 'images/[hash][ext][query]'
  }
}

asset/inline

Inlines the asset as a data URI:

{
  test: /\.svg$/,
  type: 'asset/inline'
}

asset/source

Exports the source code as a string:

{
  test: /\.txt$/,
  type: 'asset/source'
}

asset

Automatically chooses between resource and inline:

{
  test: /\.(png|jpg|gif)$/,
  type: 'asset',
  parser: {
    dataUrlCondition: {
      maxSize: 8 * 1024 // 8kb
    }
  }
}

Parser Options

JavaScript Parser

module.exports = {
  module: {
    parser: {
      javascript: {
        commonjs: true,
        amd: false,
        harmony: true,
        import: true,
        requireContext: true,
        requireEnsure: true,
        requireInclude: true,
        requireJs: false,
        system: false,
        dynamicImportMode: 'lazy',
        dynamicImportPrefetch: false,
        dynamicImportPreload: false,
        url: true,
        worker: true
      }
    }
  }
};

CSS Parser

module.exports = {
  module: {
    parser: {
      'css/module': {
        namedExports: true,
        exportType: 'css-style-sheet'
      }
    }
  }
};

Asset Parser

module.exports = {
  module: {
    parser: {
      asset: {
        dataUrlCondition: {
          maxSize: 8 * 1024
        }
      }
    }
  }
};

Common Patterns

JavaScript with Babel

{
  test: /\.jsx?$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env', '@babel/preset-react']
    }
  }
}

TypeScript

{
  test: /\.tsx?$/,
  use: 'ts-loader',
  exclude: /node_modules/
}

CSS with PostCSS

{
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: ['autoprefixer']
        }
      }
    }
  ]
}

Sass/SCSS

{
  test: /\.s[ac]ss$/,
  use: [
    'style-loader',
    'css-loader',
    'sass-loader'
  ]
}

Images

{
  test: /\.(png|svg|jpg|jpeg|gif)$/,
  type: 'asset/resource',
  generator: {
    filename: 'images/[hash][ext][query]'
  }
}

Fonts

{
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  type: 'asset/resource',
  generator: {
    filename: 'fonts/[hash][ext][query]'
  }
}

SVG with SVGR

{
  test: /\.svg$/,
  oneOf: [
    {
      resourceQuery: /react/,
      use: ['@svgr/webpack']
    },
    {
      type: 'asset/resource'
    }
  ]
}

Environment-Specific Loaders

const isDevelopment = process.env.NODE_ENV === 'development';

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  }
};