Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.webpack.js.org/llms.txt

Use this file to discover all available pages before exploring further.

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:
​
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
​
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'] }
}
​
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]'
  }
}
​
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' }
  ]
}
​
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'
        ]
      }
    ]
  }
};