Настройка
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