Модуль

Эти параметры определяют, как будут обрабатываться различные типы модулей в проекте.

`module.noParse`

RegExp [RegExp] function(resource) string [string]

Предотвращает парсинг webpack любых файлов, соответствующих заданному(ым) регулярному(ым) выражению(ям). Игнорируемые файлы не должны содержать вызовы import, require, define или любых других механизмов импорта. Это может повысить производительность сборки при игнорировании больших библиотек.

webpack.config.js

module.exports = {
  //...
  module: {
    noParse: /jquery|lodash/,
  }
};

module.exports = {
  //...
  module: {
    noParse: (content) => /jquery|lodash/.test(content)
  }
};

`module.rules`

[Rule]

Массив правил, которые применяются к запросам при создании модулей. Эти правила могут изменять способ создания модуля. Они могут применять загрузчики к модулю или изменять парсер.

Правило

object

Правило может быть разделено на три части — условия, результаты и вложенные правила.

Условия правила

Для условий есть два входных значения:

Ресурс: абсолютный путь к запрашиваемому файлу. Он уже разрешен по правилам resolve правил.
Издатель: абсолютный путь к файлу модуля, который запросил ресурс. Это местоположение импорта.

Пример: Когда мы import './style.css' внутри app.js, ресурсом является /path/to/style.css, а издателем — /path/to/app.js.

В правиле свойства test, include, exclude и resource сопоставляются с ресурсом, а свойство issuer — с издателем.

При использовании нескольких условий, все условия должны выполняться.

Будьте внимательны! Ресурс — это разрешенный путь к файлу, что означает, что ссылки на ресурсы — это реальный путь, а не местоположение ссылки. Это важно помнить, когда вы используете инструменты, которые создают ссылки на пакеты (например, npm link), так как общие условия, такие как /node_modules/ могут непреднамеренно пропустить ссылки на файлы. Обратите внимание, что вы можете отключить разрешение ссылок (так, чтобы ресурсы разрешались до пути ссылки) с помощью resolve.symlinks.

Результаты правила

Результаты правила используются только при совпадении условия правила.

Есть два выходных значения правила:

Примененные загрузчики: массив загрузчиков, применённых к ресурсу.
Параметры парсера: объект параметров, который должен использоваться для создания парсера для этого модуля.

Эти свойства влияют на загрузчики: loader, options, use.

Для совместимости также эти свойства: query, loaders.

Свойство enforce влияет на категорию загрузчика. Будет ли это обычный, предварительный или последующий загрузчик.

Свойство parser влияет на параметры парсера.

Вложенные правила

Вложенные правила могут быть указаны в свойствах rules и oneOf.

Эти правила оцениваются, когда условие правила выполняется.

`Rule.enforce`

string

Возможные значения: 'pre' | 'post'

Устанавливает категорию загрузчика. Отсутствие значения означает обычный загрузчик.

Также существует дополнительная категория "встроенный загрузчик", которая применяется непосредственно при импорте/требовании.

Есть два этапа, которые проходят все загрузчики один за другим:

Этап подбора: метод pitch загрузчиков вызывается в порядке post, inline, normal, pre. См. Загрузчик подбора для получения подробностей.
Обычный этап: метод normal на загрузчиках выполняется в порядке pre, normal, inline, post. Преобразование исходного кода модуля происходит на этом этапе.

Все обычные загрузчики можно опустить (переопределить), добавив ! в запрос.

Все обычные и предварительные загрузчики можно опустить (переопределить), добавив -! в запрос.

Все обычные, последующие и предварительные загрузчики можно опустить (переопределить), добавив !! в запрос.

// Disable normal loaders
import { a } from '!./file1.js';

// Disable preloaders and normal loaders
import { b } from  '-!./file2.js';

// Disable all loaders
import { c } from  '!!./file3.js';

Встроенные загрузчики и префиксы ! не должны использоваться, так как они нестандартны. Они могут использоваться кодом, сгенерированным загрузчиком.

`Rule.exclude`

Rule.exclude — это сокращение для Rule.resource.exclude. Если вы предоставите опцию Rule.exclude, вы не можете также использовать опцию Rule.resource. См. Rule.resource и Condition.exclude для получения подробностей.

`Rule.include`

Rule.include — это сокращение для Rule.resource.include. Если вы предоставите опцию Rule.include, вы не можете также использовать опцию Rule.resource. См. Rule.resource и Condition.include для получения подробностей.

`Rule.issuer`

Условие Condition для проверки модуля, который отправил запрос. В следующем примере, issuer для запроса a.js будет путём к файлу index.js.

index.js

import A from './a.js';

Этот параметр можно использовать для применения загрузчиков к зависимостям конкретного модуля или набора модулей.

`Rule.loader`

Rule.loader — это сокращение для Rule.use: [ { loader } ]. См. Rule.use и UseEntry.loader для получения подробностей.

`Rule.loaders`

Этот параметр устарел в пользу Rule.use.

Rule.loaders — псевдоним для Rule.use. См. Rule.use для получения подробностей.

`Rule.oneOf`

Массив правил Rules, из которых при совпадении правила используется только первое совпавшее правило.

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        oneOf: [
          {
            resourceQuery: /inline/, // foo.css?inline
            use: 'url-loader'
          },
          {
            resourceQuery: /external/, // foo.css?external
            use: 'file-loader'
          }
        ]
      }
    ]
  }
};

`Rule.options` / `Rule.query`

Rule.options и Rule.query — это сокращения для Rule.use: [ { options } ]. См. Rule.use и UseEntry.options для получения подробностей.

Rule.query устарел в пользу Rule.options и UseEntry.options.

`Rule.parser`

Объект с параметрами парсера. Все примененные параметры парсера объединяются.

Парсеры могут проверить эти параметры и отключить или переконфигурировать себя соответственно. Большинство стандартных плагинов интерпретируют значения следующим образом:

Установка параметра в false отключает парсер.
Установка параметра в true или оставление его undefined включает парсер.

Однако плагины парсеров могут принимать больше, чем просто булево значение. Например, внутренний NodeStuffPlugin может принять объект вместо true для добавления дополнительных параметров для конкретного правила.

Примеры (параметры парсера стандартными плагинами):

module.exports = {
  //...
  module: {
    rules: [
      {
        //...
        parser: {
          amd: false, // disable AMD
          commonjs: false, // disable CommonJS
          system: false, // disable SystemJS
          harmony: false, // disable ES2015 Harmony import/export
          requireInclude: false, // disable require.include
          requireEnsure: false, // disable require.ensure
          requireContext: false, // disable require.context
          browserify: false, // disable special handling of Browserify bundles
          requireJs: false, // disable requirejs.*
          node: false, // disable dirname, filename, module, require.extensions, require.main, etc.
          node: {...} // reconfigure node layer on module level
        }
      }
    ]
  }
}

`Rule.resource`

Условие Condition сопоставляется с ресурсом. Вы можете указать опцию Rule.resource или использовать сокращенные опции Rule.test, Rule.exclude, и Rule.include. Подробнее см. в Rule условиях.

`Rule.resourceQuery`

Условие Condition сопоставляется с запросом к ресурсу. Этот параметр используется для проверки раздела запроса (т.е. со знака вопроса и далее). Если вы import Foo from './foo.css?inline', следующее условие будет соответствовать:

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        resourceQuery: /inline/,
        use: 'url-loader'
      }
    ]
  }
};

`Rule.rules`

Массив правил Rules, которые также применяются при совпадении правила.

`Rule.sideEffects`

bool

Указывают, какие части модуля содержат побочные эффекты. См. Tree Shaking для получения подробностей.

`Rule.test`

Rule.test — это сокращение для Rule.resource.test. Если вы предоставите опцию Rule.test, вы не можете также использовать опцию Rule.resource. См. Rule.resource и Condition.test для получения подробностей.

`Rule.type`

string

Возможные значения: 'javascript/auto' | 'javascript/dynamic' | 'javascript/esm' | 'json' | 'webassembly/experimental'

Rule.type устанавливает тип соответствующего модуля. Это предотвращает выполнение defaultRules и их стандартного поведения импорта. Например, если вы хотите загрузить файл .json через пользовательский загрузчик, вам нужно установить type на javascript/auto, чтобы обойти встроенный в webpack механизм импорта JSON. (См. v4.0 changelog для получения дополнительной информации)

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      //...
      {
        test: /\.json$/,
        type: 'javascript/auto',
        loader: 'custom-json-loader'
      }
    ]
  }
};

`Rule.use`

[UseEntry] function(info)

[UseEntry]

Rule.use может быть массивом UseEntry, которые применяются к модулям. Каждый элемент указывает используемый загрузчик.

Передача строки (например, use: [ 'style-loader' ]) является сокращением для свойства loader (т.е. use: [ { loader: 'style-loader '} ]).

Загрузчики можно объединять, передавая несколько загрузчиков, которые будут применяться справа налево (последний — первый).

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        //...
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          },
          {
            loader: 'less-loader',
            options: {
              noIeCompat: true
            }
          }
        ]
      }
    ]
  }
};

function(info)

Rule.use также может быть функцией, которая получает объект, описывающий загружаемый модуль, и должна возвращать массив элементов UseEntry.

Объект параметра info содержит следующие поля:

Текущий компилятор webpack (может быть неопределённым)
Путь к модулю, импортирующему загружаемый модуль
Всегда путь к загружаемому модулю
Путь к загружаемому модулю, обычно равный realResource, за исключением случаев, когда имя ресурса перезаписывается через !=! в строке запроса

Для возвращаемого значения можно использовать тот же сокращённый вид, что и для массива (например, use: [ 'style-loader' ]).

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        use: (info) => ([
          {
            loader: 'custom-svg-loader'
          },
          {
            loader: 'svgo-loader',
            options: {
              plugins: [{
                cleanupIDs: { prefix: basename(info.resource) }
              }]
            }
          }
        ])
      }
    ]
  }
};

См. UseEntry для получения подробностей.

`Rule.resolve`

Rule.resolve доступен начиная с webpack 4.36.1

Разрешение можно настроить на уровне модуля. См. все доступные параметры на странице конфигурации разрешения. Все применённые параметры разрешения объединяются с параметрами верхнего уровня resolve.

Например, предположим, что у нас есть запись в ./src/index.js, ./src/footer/default.js и ./src/footer/overriden.js для демонстрации разрешения на уровне модуля.

./src/index.js

import footer from 'footer';
console.log(footer);

./src/footer/default.js

export default 'default footer';

./src/footer/overriden.js

export default 'overriden footer';

webpack.js.org

module.exports = {
  resolve: {
    alias: {
      'footer': './footer/default.js'
    }
  }
};

При создании пакета с этой конфигурацией, console.log(footer) будет выводить 'default footer'. Давайте установим Rule.resolve для файлов .js, и алиасируйте footer на overriden.js.

webpack.js.org

module.exports = {
  resolve: {
    alias: {
      'footer': './footer/default.js'
    }
  },
  module: {
    rules: [
      alias: {
        'footer': './footer/overriden.js'
      }
    ]
  }
};

При создании пакета с обновлённой конфигурацией, console.log(footer) будет выводить 'overriden footer'.

`Condition`

Условиями могут быть:

Строка: чтобы соответствовать вводу, он должен начинаться с предоставленной строки. Например, абсолютный путь к каталогу или абсолютный путь к файлу.
Выражение регулярных выражений: оно проверяется на вводе.
Функция: она вызывается с вводом и должна возвращать истинное значение для соответствия.
Массив условий: должно выполняться по крайней мере одно из условий.
Объект: все свойства должны соответствовать. Каждое свойство имеет определённое поведение.

{ test: Condition }: Условие должно выполняться. Стандарт — предоставить здесь выражение регулярного выражения или массив выражений регулярных выражений, но это не навязывается.

{ include: Condition }: Условие должно выполняться. Стандарт — предоставить здесь строку или массив строк, но это не навязывается.

{ exclude: Condition }: Условие не должно выполняться. Стандарт — предоставить здесь строку или массив строк, но это не навязывается.

{ and: [Condition] }: Все условия должны выполняться.

{ or: [Condition] }: Любое условие должно выполняться.

{ not: [Condition] }: Ни одно условие не должно выполняться.

Пример:

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        include: [
          path.resolve(__dirname, 'app/styles'),
          path.resolve(__dirname, 'vendor/styles')
        ]
      }
    ]
  }
};

`UseEntry`

object function(info)

object

Он должен иметь свойство loader, являющееся строкой. Оно разрешается относительно конфигурационного context с параметрами разрешения загрузчика (resolveLoader).

Он может иметь свойство options, являющееся строкой или объектом. Это значение передаётся загрузчику, который должен интерпретировать его как параметры загрузчика.

Для совместимости также возможно свойство query, являющееся алиасом для свойства options. Используйте свойство options вместо этого.

Обратите внимание, что webpack должен сгенерировать уникальный идентификатор модуля из ресурса и всех загрузчиков, включая параметры. Он пытается сделать это с помощью JSON.stringify объекта параметров. Это нормально в 99,9% случаев, но может быть не уникальным, если вы применяете одни и те же загрузчики с разными параметрами к ресурсу, а параметры содержат некоторые строковые значения.

Это также нарушается, если объект параметров нельзя сериализовать в строку (например, циклический JSON). Из-за этого вы можете иметь свойство ident в объекте параметров, используемое в качестве уникального идентификатора.

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        loader: 'css-loader',
        options: {
          modules: true
        }
      }
    ]
  }
};

function(info)

UseEntry также может быть функцией, которая получает объект, описывающий загружаемый модуль, и должна возвращать объект параметров. Это можно использовать для изменения параметров загрузчика на основе каждого модуля.

Объект параметра info имеет следующие поля:

compiler: Текущий компилятор webpack (может быть неопределённым)
issuer: Путь к модулю, импортирующему загружаемый модуль
realResource: Всегда путь к загружаемому модулю
resource: Путь к загружаемому модулю, обычно равный realResource, за исключением случаев, когда имя ресурса перезаписывается через !=! в строке запроса

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        loader: 'file-loader',
        options: {
          outputPath: 'svgs'
        }
      },
      (info) => ({
        loader: 'svgo-loader',
        options: {
          plugins: [{
            cleanupIDs: { prefix: basename(info.resource) }
          }]
        }
      })
    ]
  }
};

Модульные контексты

Избегайте использования этих параметров, так как они устарели и вскоре будут удалены.

Эти параметры описывают стандартные настройки контекста, созданного при обнаружении динамической зависимости.

Пример динамической зависимости unknown: require.

Пример динамической зависимости expr: require(expr).

Пример динамической зависимости wrapped: require('./templates/' + expr).

Вот доступные параметры с их значениями по умолчанию:

webpack.config.js

module.exports = {
  //...
  module: {
    exprContextCritical: true,
    exprContextRecursive: true,
    exprContextRegExp: false,
    exprContextRequest: '.',
    unknownContextCritical: true,
    unknownContextRecursive: true,
    unknownContextRegExp: false,
    unknownContextRequest: '.',
    wrappedContextCritical: false,
    wrappedContextRecursive: true,
    wrappedContextRegExp: /.*/,
    strictExportPresence: false // since webpack 2.3.0
  }
};

Вы можете использовать ContextReplacementPlugin для изменения этих значений для отдельных зависимостей. Это также устранит предупреждение.

Несколько вариантов использования:

Выводить предупреждение для динамических зависимостей: wrappedContextCritical: true.
require(expr) должен включать весь каталог: exprContextRegExp: /^\.\//
require('./templates/' + expr) по умолчанию не должен включать подкаталоги: wrappedContextRecursive: false
strictExportPresence делает отсутствие экспорта ошибкой вместо предупреждения

© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://v4.webpack.js.org/configuration/module

Модуль

module.noParse

module.rules

Правило

Условия правила

Результаты правила

Вложенные правила

Rule.enforce

Rule.exclude

Rule.include

Rule.issuer

Rule.loader

Rule.loaders

Rule.oneOf

Rule.options / Rule.query

Rule.parser

Rule.resource

Rule.resourceQuery

Rule.rules

Rule.sideEffects

Rule.test

Rule.type

Rule.use

Rule.resolve

Condition

UseEntry

Модульные контексты

`module.noParse`

`module.rules`

`Rule.enforce`

`Rule.exclude`

`Rule.include`

`Rule.issuer`

`Rule.loader`

`Rule.loaders`

`Rule.oneOf`

`Rule.options` / `Rule.query`

`Rule.parser`

`Rule.resource`

`Rule.resourceQuery`

`Rule.rules`

`Rule.sideEffects`

`Rule.test`

`Rule.type`

`Rule.use`

`Rule.resolve`

`Condition`

`UseEntry`