Spec-Zone.ru › webpack 1

Настройка

webpack получает объект конфигурации. В зависимости от вашего использования webpack, есть два способа передать этот объект конфигурации:

id="cli">Командная строка

Если вы используете командную строку, она будет читать файл webpack.config.js (или файл, переданный опцией --config). Этот файл должен экспортировать объект конфигурации:

module.exports = {
    // configuration
};

id="node-js-api">API node.js

Если вы используете API node.js, вам нужно передать объект конфигурации в качестве параметра:

webpack({
    // configuration
}, callback);

id="multiple-configurations">Несколько конфигураций

В обоих случаях вы также можете использовать массив конфигураций, которые обрабатываются параллельно. Они используют кэш и наблюдатели файловой системы, поэтому это более эффективно, чем вызывать webpack несколько раз.

Содержимое объекта конфигурации

Подсказка: Имейте в виду, что вам не нужно записывать чистый JSON в конфигурацию. Используйте любой JavaScript, который вам нужен. Это просто модуль node.js…

Пример очень простой конфигурации:

{
    context: __dirname + "/app",
    entry: "./entry",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    }
}

id="context">context

Базовый каталог (абсолютный путь!) для разрешения опции entry. Если output.pathinfo задано, включенный путь сокращается до этого каталога.

По умолчанию: process.cwd()

id="entry">entry

Точка входа для пакета.

Если вы передаете строку: Строка разрешается в модуль, который загружается при запуске.

Если вы передаете массив: Все модули загружаются при запуске. Последний экспортируется.

entry: ["./entry1", "./entry2"]

Если вы передаете объект: Создаются несколько пакетов входа. Ключ — имя блока. Значение может быть строкой или массивом.

{
    entry: {
        page1: "./page1",
        page2: ["./entry1", "./entry2"]
    },
    output: {
        // Make sure to use [name] or [id] in output.filename
        //  when using multiple entry points
        filename: "[name].bundle.js",
        chunkFilename: "[id].bundle.js"
    }
}

ПРИМЕЧАНИЕ: Невозможно настроить другие опции, специфичные для точек входа. Если вам нужна конфигурация, специфичная для точки входа, вам нужно использовать несколько конфигураций.

id="output">output

Параметры, влияющие на выход компиляции. output параметры сообщают Webpack, как записать скомпилированные файлы в диск. Обратите внимание, что, хотя может быть несколько entry точек, только одна output конфигурация указана.

Если вы используете хеширование ([hash] или [chunkhash]), убедитесь, что порядок модулей согласован. Используйте OccurrenceOrderPlugin или recordsPath

output.filename

Указывает имя каждого выходного файла на диске. Вы не должны указывать здесь абсолютный путь! Параметр output.path определяет расположение на диске, куда записываются файлы. filename используется только для именования отдельных файлов.

один вход

{
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/build'
  }
}

// writes to disk: ./build/bundle.js

несколько входов

Если ваша конфигурация создает более одного «блока» (как при нескольких точках входа или при использовании плагинов, таких как CommonsChunkPlugin), вы должны использовать подстановки, чтобы гарантировать, что каждый файл имеет уникальное имя.

[name] заменяется именем блока.

[hash] заменяется хэшем компиляции.

[chunkhash] заменяется хэшем блока.

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/build'
  }
}

// writes to disk: ./build/app.js, ./build/search.js

output.path

Каталог вывода как абсолютный путь (обязательно).

[hash] заменяется хэшем компиляции.

output.publicPath

publicPath указывает общедоступный URL-адрес выходных файлов при ссылке на них в браузере. Для загрузчиков, которые встраивают <script> или <link> теги или ссылаются на ресурсы, такие как изображения, publicPath используется как href или url() к файлу, когда он отличается от его местоположения на диске (как указано в path). Это может быть полезно, когда вы хотите разместить некоторые или все выходные файлы на другом домене или на CDN. Веб-сервер Webpack также использует это для определения пути, откуда ожидается предоставление выходных файлов. Как и в случае с path, вы можете использовать подстановку [hash], чтобы получить лучший профиль кеширования.

config.js

output: {
    path: "/home/proj/public/assets",
    publicPath: "/assets/"
}

index.html

<head>
  <link href="/assets/spinner.gif"/>
</head>

И более сложный пример использования CDN и хэшей для ресурсов.

config.js

output: {
    path: "/home/proj/cdn/assets/[hash]",
    publicPath: "http://cdn.example.com/assets/[hash]/"
}

Примечание: В тех случаях, когда конечный publicPath выходных файлов не известен во время компиляции, его можно оставить пустым и динамически установить во время выполнения в файле точки входа. Если вы не знаете publicPath во время компиляции, вы можете опустить его и установить __webpack_public_path__ в вашей точке входа.

 __webpack_public_path__ = myRuntimePublicPath

// rest of your application entry

output.chunkFilename

Имя файла блоков, не являющихся точками входа, в качестве относительного пути внутри каталога output.path.

[id] заменяется идентификатором блока.

[name] заменяется именем блока (или идентификатором, если у блока нет имени).

[hash] заменяется хэшем компиляции.

[chunkhash] заменяется хэшем блока.

output.sourceMapFilename

Имя файла SourceMap для файлов JavaScript. Они находятся в каталоге output.path.

[file] заменяется именем файла JavaScript.

[id] заменяется идентификатором блока.

[hash] заменяется хэшем компиляции.

По умолчанию: "[file].map"

output.devtoolModuleFilenameTemplate

Шаблон строки имени файла для массива sources в сгенерированном SourceMap.

[resource] заменяется путем, используемым Webpack для разрешения файла, включая параметры запроса к самому правому загрузчику (если есть).

[resource-path] такое же, как [resource], но без параметров запроса загрузчика.

[loaders] список загрузчиков и параметров до имени самого правого загрузчика (только явные загрузчики).

[all-loaders] список загрузчиков и параметров до имени самого правого загрузчика (включая автоматические загрузчики).

[id] заменяется идентификатором модуля.

[hash] заменяется хэшем идентификатора модуля.

[absolute-resource-path] заменяется абсолютным именем файла.

По умолчанию (devtool=[inline-]source-map): "webpack:///[resource-path]"
По умолчанию (devtool=eval): "webpack:///[resource-path]?[loaders]"
По умолчанию (devtool=eval-source-map): "webpack:///[resource-path]?[hash]"

Также может быть определён как функция вместо шаблона строки. Функция будет принимать параметр объекта info, который предоставляет следующие свойства:

  • identifier
  • shortIdentifier
  • resource
  • resourcePath
  • absoluteResourcePath
  • allLoaders
  • query
  • moduleId
  • hash

output.devtoolFallbackModuleFilenameTemplate

Аналогично output.devtoolModuleFilenameTemplate, но используется в случае дублирующихся идентификаторов модулей.

По умолчанию: "webpack:///[resourcePath]?[hash]"

output.devtoolLineToLine

Включить режим сопоставления строки в строку для всех/указанных модулей. Режим сопоставления строки в строку использует простой SourceMap, где каждая строка сгенерированного источника сопоставляется с той же строкой исходного источника. Это оптимизация производительности. Используйте только тогда, когда ваша производительность нуждается в улучшении и вы уверены, что входные строки соответствуют сгенерированным строкам.

true включает его для всех модулей (не рекомендуется).

Объект {test, include, exclude}, аналогичный module.loaders, включает его для конкретных файлов.

По умолчанию: отключено

output.hotUpdateChunkFilename

Имя файла блоков горячих обновлений. Они находятся в каталоге output.path.

[id] заменяется идентификатором блока.

[hash] заменяется хэшем компиляции (последний хэш, сохранённый в записях).

По умолчанию: "[id].[hash].hot-update.js"

output.hotUpdateMainFilename

Имя файла основного файла горячих обновлений. Он находится в каталоге output.path.

[hash] заменяется хэшем компиляции (последний хэш, сохранённый в записях).

По умолчанию: "[hash].hot-update.json"

output.jsonpFunction

Функция JSONP, используемая webpack для асинхронной загрузки блоков.

Более короткая функция может немного уменьшить размер файла. Используйте другой идентификатор, если на одной странице есть несколько экземпляров webpack.

По умолчанию: "webpackJsonp"

output.hotUpdateFunction

Функция JSONP, используемая webpack для асинхронной загрузки блоков горячих обновлений.

По умолчанию: "webpackHotUpdate"

output.pathinfo

Включать комментарии с информацией о модулях.

require(/* ./test */23)

Не используйте это в продакшене.

По умолчанию: false

output.library

Если установлено, экспортирует пакет как библиотеку. output.library — имя.

Используйте это, если вы пишете библиотеку и хотите опубликовать ее как один файл.

output.libraryTarget

Какой формат использовать для экспорта библиотеки:

"var" - Экспорт путем установки переменной: var Library = xxx (по умолчанию)

"this" - Экспорт путем установки свойства объекта this: this["Library"] = xxx

"commonjs" - Экспорт путем установки свойства объекта exports: exports["Library"] = xxx

"commonjs2" - Экспорт путем установки module.exports: module.exports = xxx

"amd" - Экспорт в AMD (необязательно с именем - задайте имя с помощью опции library)

"umd" - Экспорт в AMD, CommonJS2 или как свойство в корне

По умолчанию: "var"

Если output.library не задано, но output.libraryTarget установлено на значение, отличное от var, каждое свойство экспортированного объекта копируется (кроме amd, commonjs2 и umd).

output.umdNamedDefine

Если output.libraryTarget установлено на umd и output.library установлено, установка этого значения на true даст имя модулю AMD.

output.sourcePrefix

Добавляет этот строковый префикс к каждой строке источника в пакете.

По умолчанию: "\t"

output.crossOriginLoading

Этот параметр включает загрузку фрагментов из других доменов.

Возможные значения:

false — Отключить загрузку из других доменов.

"anonymous" — Загрузка из других доменов включена. При использовании anonymous учетные данные не будут отправляться с запросом.

"use-credentials" — Загрузка из других доменов включена и учетные данные будут отправлены с запросом.

Дополнительную информацию о загрузке из других доменов см. на MDN

По умолчанию: false

module

Параметры, влияющие на обычные модули (NormalModuleFactory)

module.loaders

Массив автоматически применяемых загрузчиков.

Каждый элемент может иметь следующие свойства:

  • test: Условие, которое должно быть выполнено
  • exclude: Условие, которое не должно быть выполнено
  • include: Массив путей или файлов, где импортированные файлы будут преобразованы загрузчиком
  • loader: Строка загрузчиков, разделенных символом "!"
  • loaders: Массив загрузчиков в виде строк

Условие может быть RegExp (проверяется относительно абсолютного пути), string, содержащим абсолютный путь, function(absPath): bool, или массивом из таких элементов, объединённых оператором “и”.

См. больше: loaders

ВАЖНО: Загрузчики здесь разрешаются относительно ресурса, к которому они применяются. Это означает, что они не разрешаются относительно файла конфигурации. Если у вас установлены загрузчики из npm, а папка node_modules не находится в родительской папке всех файлов исходного кода, webpack не может найти загрузчик. Вам необходимо добавить папку node_modules в качестве абсолютного пути к параметру resolveLoader.root. (resolveLoader: { root: path.join(__dirname, "node_modules") })

Пример:

module: {
  loaders: [
    {
      // "test" is commonly used to match the file extension
      test: /\.jsx$/,

      // "include" is commonly used to match the directories
      include: [
        path.resolve(__dirname, "app/src"),
        path.resolve(__dirname, "app/test")
      ],

      // "exclude" should be used to exclude exceptions
      // try to prefer "include" when possible

      // the "loader"
      loader: "babel-loader" // or "babel" because webpack adds the '-loader' automatically
    }
  ]
}

module.preLoaders, module.postLoaders

Синтаксис, подобный module.loaders.

Массив применяемых пре- и пост-загрузчиков.

module.noParse

Не обрабатывать файлы, соответствующие указанному регулярному выражению или массиву регулярных выражений.

Проверка производится по полному разрешенному запросу.

Это может повысить производительность, если игнорировать большие библиотеки.

Ожидается, что файлы не будут содержать вызовы require, define, или аналогичные. Они могут использовать exports и module.exports.

автоматически созданные контексты по умолчанию module.xxxContextXxx

Существует несколько вариантов настройки значений по умолчанию для автоматически созданного контекста. Мы различаем три типа автоматически созданных контекстов:

  • exprContext: Выражение в качестве зависимости (например, require(expr))
  • wrappedContext: Выражение плюс префикс и/или суффикс (например, require("./templates/" + expr))
  • unknownContext: Любое другое неразборчивое использование require (например, require)

Для автоматически созданных контекстов возможны четыре параметра:

  • request: Запрос контекста.
  • recursive: Подкаталоги должны быть обработаны.
  • regExp: Регулярное выражение для выражения.
  • critical: Этот тип зависимости должен рассматриваться как критический (выводит предупреждение).

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

unknownContextRequest = ".", unknownContextRecursive = true, unknownContextRegExp = /^\.\/.*$/, unknownContextCritical = true

exprContextRequest = ".", exprContextRegExp = /^\.\/.*$/, exprContextRecursive = true, exprContextCritical = true

wrappedContextRegExp = /.*/, wrappedContextRecursive = true, wrappedContextCritical = false

Примечание: module.wrappedContextRegExp относится только к средней части полного регулярного выражения. Остальное генерируется из префикса и суффикса.

Пример:

{
  module: {
    // Disable handling of unknown requires
    unknownContextRegExp: /$^/,
    unknownContextCritical: false,

    // Disable handling of requires with a single expression
    exprContextRegExp: /$^/,
    exprContextCritical: false,

    // Warn for every expression in require
    wrappedContextCritical: true
  }
}

resolve

Параметры, влияющие на разрешение модулей.

resolve.alias

Замена модулей другими модулями или путями.

Ожидается объект, где ключи — имена модулей, а значения — новые пути. Это похоже на замену, но немного умнее. Если ключ заканчивается на $, будет заменено только точное совпадение (без $).

Если значение — относительный путь, он будет относиться к файлу, содержащему require.

Примеры: Вызов require из /abc/entry.js с различными настройками алиасов.

alias: require("xyz") require("xyz/file.js")
{} /abc/node_modules/xyz/index.js /abc/node_modules/xyz/file.js
{ xyz: "/absolute/path/to/file.js" } /absolute/path/to/file.js ошибка
{ xyz$: "/absolute/path/to/file.js" } /absolute/path/to/file.js /abc/node_modules/xyz/file.js
{ xyz: "./dir/file.js" } /abc/dir/file.js ошибка
{ xyz$: "./dir/file.js" } /abc/dir/file.js /abc/node_modules/xyz/file.js
{ xyz: "/some/dir" } /some/dir/index.js /some/dir/file.js
{ xyz$: "/some/dir" } /some/dir/index.js /abc/node_modules/xyz/file.js
{ xyz: "./dir" } /abc/dir/index.js /abc/dir/file.js
{ xyz: "modu" } /abc/node_modules/modu/index.js /abc/node_modules/modu/file.js
{ xyz$: "modu" } /abc/node_modules/modu/index.js /abc/node_modules/xyz/file.js
{ xyz: "modu/some/file.js" } /abc/node_modules/modu/some/file.js ошибка
{ xyz: "modu/dir" } /abc/node_modules/modu/dir/index.js /abc/node_modules/dir/file.js
{ xyz: "xyz/dir" } /abc/node_modules/xyz/dir/index.js /abc/node_modules/xyz/dir/file.js
{ xyz$: "xyz/dir" } /abc/node_modules/xyz/dir/index.js /abc/node_modules/xyz/file.js

index.js может быть разрешено на другой файл, если определено в package.json.

/abc/node_modules тоже может быть разрешено в /node_modules.

resolve.root

Директория (абсолютный путь), содержащая ваши модули. Также может быть массивом директорий. Эта настройка используется для добавления отдельных директорий в путь поиска.

Она должна быть абсолютным путем! Не передавайте что-то вроде ./app/modules.

Пример:

var path = require('path');

// ...
resolve: {
  root: [
    path.resolve('./app/modules'),
    path.resolve('./vendor/modules')
  ]
}

resolve.modulesDirectories

Массив имён директорий, которые будут разрешены в текущей директории и её предках, а затем будут проверены на наличие модулей. Это работает аналогично тому, как Node.js находит директории “node_modules”. Например, если значение — ["mydir"], webpack будет искать в “./mydir”, “../mydir”, “../../mydir” и т. д.

По умолчанию: ["web_modules", "node_modules"]

Примечание: Передача "../someDir", "app", "." или абсолютного пути здесь не требуется. Используйте только имя директории, а не путь. Используйте только если ожидаете иерархию внутри этих папок. В противном случае вы можете использовать параметр resolve.root.

resolve.fallback

Директория (или массив директорий абсолютные пути), в которой webpack должен искать модули, которые не были найдены в resolve.root или resolve.modulesDirectories.

resolve.extensions

Массив расширений, которые должны использоваться для разрешения модулей. Например, чтобы обнаружить файлы CoffeeScript, ваш массив должен содержать строку ".coffee".

По умолчанию: [".webpack.js", ".web.js", ".js"]

ВАЖНО: Установка этого параметра переопределит значение по умолчанию, и webpack больше не будет пытаться разрешать модули с использованием стандартных расширений. Если вы хотите, чтобы модули, которые были запрошены с расширением (например, require('./somefile.ext')) были правильно разрешены, вы должны включить пустую строку в ваш массив. Аналогично, если вы хотите, чтобы модули, которые были запрошены без расширения (например, require('underscore')), были разрешены к файлам с расширением “.js”, вы должны включить ".js" в ваш массив.

resolve.packageMains

Проверяются эти поля в package.json на наличие подходящих файлов.

По умолчанию: ["webpack", "browser", "web", "browserify", ["jam", "main"], "main"]

Примечание: Этот параметр был изменён на resolve.mainFields в webpack 2.

resolve.packageAlias

Проверяется это поле в package.json на наличие объекта. Пара ключи-значения обрабатываются как алиасы в соответствии со этим спецификацией

По умолчанию не задано

Пример: "browser" для проверки поля браузера.

resolve.unsafeCache

Включить агрессивное, но небезопасное кеширование для разрешения части ваших файлов. Изменения в кэшированных путях могут привести к ошибкам (в редких случаях). Ожидается массив регулярных выражений, только регулярное выражение или true (все файлы). Если разрешённый путь соответствует, он будет кэширован.

По умолчанию: []

resolveLoader

Как resolve но для загрузчиков.

// Default:
{
    modulesDirectories: ["web_loaders", "web_modules", "node_loaders", "node_modules"],
    extensions: ["", ".webpack-loader.js", ".web-loader.js", ".loader.js", ".js"],
    packageMains: ["webpackLoader", "webLoader", "loader", "main"]
}

Обратите внимание, что здесь можно использовать alias и другие функции, знакомые по resolve. Например, { txt: 'raw-loader' } заменит txt!templates/demo.txt на raw-loader.

resolveLoader.moduleTemplates

Это свойство resolveLoader.

Оно описывает альтернативы имени модуля, которые будут проверены.

По умолчанию: ["*-webpack-loader", "*-web-loader", "*-loader", "*"]

externals

Указывает зависимости, которые не должны быть скомпонованы webPack, а вместо этого должны оставаться запрошенными в результирующем наборе. Методика запроса изменяется на то, что определено в output.libraryTarget или на основе каждой зависимости с использованием определения объекта пар свойство-значение. Таким образом, значение externals может быть строкой, объектом, функцией, регулярным выражением или массивом следующим образом:

  • string: преобразует точно совпадающие запросы зависимостей в технику, предписанную output.libraryTarget.
  • object: предоставляет объект словаря, описывающий обработку отдельных зависимостей. Ключ должен точно совпадать с соответствующим запросом зависимостей. Соответствующее значение может быть false для игнорирования запроса внешней обработки и связывания зависимости в любом случае; true для связывания зависимости с помощью техники, предписанной output.libraryTarget; или строка, содержащая два разделенных пробелом имени, относящиеся к технике запроса по output.libraryTarget и ссылке на зависимость, которая может отличаться от связанного ключа.
  • function: function(context, request, callback(err, result)) Функция вызывается для каждой зависимости. Если результатом вызова функции обратного вызова является значение, это значение обрабатывается как значение свойства объекта (см. предыдущий пункт).
  • RegExp: Каждая соответствующая зависимость становится внешней. Соответствующий текст используется в качестве request для внешней зависимости. Поскольку request является точным кодом, используемым для генерации внешней код-вставки, если вы подбираете пакет commonjs (например, ‘../some/package.js’), используйте функцию стратегию external вместо этого. Затем вы можете импортировать пакет через callback(null, "require('" + request + "')", что генерирует module.exports = require('../some/package.js');, используя require вне контекста webpack.
  • array: Множественные значения схемы (рекурсивно).

Пример:

{
    output: { libraryTarget: "commonjs" },
    externals: [
        {
            a: false, // a is not external
            b: true, // b is external `module.exports = b`
            "./c": "c", // "./c" is external `module.exports = c`
            "./d": "var d" // "./d" is external `module.exports = ./d`  <-- would be syntax error
                        "./f": "commonjs2 ./a/b" // "./f" is external `module.exports = require("./a/b")`
                        "./f": "commonjs ./a/b" // ...same as commonjs2
                        "./f": "this ./a/b" // "./f" is external `(function() { module.exports = this["./a/b"]; }())`
        },
        // Every non-relative module is external
        // abc -> require("abc")
        /^[a-z\-0-9]+$/,
        function(context, request, callback) {
            // Every module prefixed with "global-" becomes external
            // "global-abc" -> abc
            if(/^global-/.test(request))
                return callback(null, "var " + request.substr(7));
            callback();
        },
        "./e" // "./e" is external (require("./e"))
    ]
}
тип значение результирующий код импорта
“var” "abc" module.exports = abc;
“var” "abc.def" module.exports = abc.def;
“this” "abc" (function() { module.exports = this["abc"]; }());
“this” ["abc", "def"] (function() { module.exports = this["abc"]["def"]; }());
“commonjs” "abc" module.exports = require("abc");
“commonjs” ["abc", "def"] module.exports = require("abc").def;
“amd” "abc" define(["abc"], function(X) { module.exports = X; })
“umd” "abc" все вышеперечисленное

Принудительное применение amd или umd во внешнем значении приведет к ошибке, если компиляция не выполняется как цель amd/umd.

Примечание: Если вы используете umd, вы можете указать объект как внешнее значение со свойством commonjs, commonjs2, amd и root для установки различных значений для каждого вида импорта.

target

  • "web" Компиляция для использования в среде, подобной браузерной (по умолчанию)
  • "webworker" Компиляция как WebWorker
  • "node" Компиляция для использования в среде, подобной node.js (используйте require для загрузки фрагментов)
  • "async-node" Компиляция для использования в среде, подобной node.js (используйте fs и vm для асинхронной загрузки фрагментов)
  • "node-webkit" Компиляция для использования в webkit, использует загрузку фрагментов jsonp, но также поддерживает встроенные модули node.js плюс require(“nw.gui”) (экспериментально)
  • "electron" Компиляция для использования в Electron – поддерживает require-ing модулей Electron.
  • "electron-renderer" Компиляция для процесса рендеринга electron, предоставьте целевой объект с использованием JsonpTemplatePlugin, FunctionModulePlugin для браузерной среды и NodeTargetPlugin и ExternalsPlugin для модулей commonjs и встроенных модулей electron. Примечание: необходим webpack >= 1.12.15.

bail

Отчет об первой ошибке как об ошибке вместо ее игнорирования.

profile

Сбор временной информации для каждого модуля.

Подсказка: Используйте инструмент анализа для визуализации. --json или stats.toJson() дадут вам статистику в формате JSON.

cache

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

В режиме наблюдения включено по умолчанию.

Вы можете передать false для его отключения.

Вы можете передать объект для его включения и позволить webpack использовать переданный объект в качестве кэша. Таким образом, вы можете использовать общий объект кэша между несколькими вызовами компилятора. Примечание: Не используйте кэш между вызовами с разными параметрами.

debug

Переключить загрузчики в режим отладки.

devtool

Выбор инструмента разработчика для улучшения отладки.

eval - Каждый модуль выполняется с eval и //@ sourceURL.

source-map - Выводится SourceMap. См. также output.sourceMapFilename.

hidden-source-map - То же, что и source-map, но не добавляет комментарий ссылки в сборку.

inline-source-map - SourceMap добавляется как DataUrl в файл JavaScript.

eval-source-map - Каждый модуль выполняется с eval и SourceMap добавляется как DataUrl в eval.

cheap-source-map - SourceMap без столбцовых сопоставлений. SourceMap из загрузчиков не используются.

cheap-module-source-map - SourceMap без столбцовых сопоставлений. SourceMap из загрузчиков упрощены до одного сопоставления на строку.

Префикс @, # или #@ принудительно установит стиль pragma. (По умолчанию @ в webpack@1 и # в webpack@2; рекомендуется использовать #).

Возможны комбинации. hidden, inline, eval и стиль pragma являются взаимоисключающими.

Например, cheap-module-inline-source-map, cheap-eval-source-map, #@source-map

Подсказка: Если ваши модули уже содержат SourceMaps, вам потребуется использовать source-map-loader для их объединения с выводимым SourceMap.

devtool скорость сборки скорость пересборки поддерживается в продакшене качество
eval +++ +++ нет сгенерированный код
cheap-eval-source-map + ++ нет преобразованный код (только строки)
cheap-source-map + о да преобразованный код (только строки)
cheap-module-eval-source-map о ++ нет исходный код (только строки)
cheap-module-source-map о - да исходный код (только строки)
eval-source-map – + нет исходный код
source-map – – да исходный код

Пример:

{
    devtool: "#inline-source-map"
}
// =>
//# sourceMappingURL=...

Примечание: В следующей основной версии значение по умолчанию для -d будет изменено на cheap-module-eval-source-map

devServer

Может использоваться для настройки поведения webpack-dev-server при передаче конфигурации webpack в webpack-dev-server CLI.

Пример:

{
    devServer: {
        contentBase: "./build",
    }
}

node

Включение полифиллов или подстановок для различных элементов node:

  • console: true или false
  • global: true или false
  • process: true, "mock" или false
  • Buffer: true или false
  • __filename: true (фактическое имя файла, относительное к опции context), "mock" ("/index.js") или false (стандартный node __dirname)
  • __dirname: true (фактическая директория, относительная к опции context), "mock" ("/") или false (стандартный node __dirname)
  • <node buildin>: true, "mock", "empty" или false
// Default:
{
    console: false,
    global: true,
    process: true,
    Buffer: true,
    __filename: "mock",
    __dirname: "mock",
    setImmediate: true
}

amd

Установите значение require.amd и define.amd.

Пример: amd: { jQuery: true } (для старых версий AMD 1.x jquery)

loader

Настраиваемые значения, доступные в контексте загрузчика.

recordsPath, recordsInputPath, recordsOutputPath

Сохранение/Загрузка состояния компилятора из/в файл json. Это приведет к постоянным идентификаторам модулей и фрагментов.

Ожидается абсолютный путь. recordsPath используется для recordsInputPath и recordsOutputPath если они не определены.

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

plugins

Добавление дополнительных плагинов в компилятор.

© 2012–2015 Tobias Koppers
Licensed under the MIT License.
https://webpack.github.io/docs/configuration.html

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API