Následující části popisují hlavní změny z WebPacku 1 na 2.

resolve.root, resolve.fallback, resolve.modulesDirectories

Tyto volby byly nahrazeny jedinou volbou resolve.modules. Další použití najdete v části resolving.

 resolve: {- root: path.join(__dirname, "src")+ modules: }

resolve.extensions

Tato volba již nevyžaduje předání prázdného řetězce. Toto chování bylo přesunuto do resolve.enforceExtension. Další použití najdete v části resolving.

resolve.*

Bylo zde změněno několik API. Nejsou uvedeny podrobně, protože se běžně nepoužívají. Podrobnosti viz resolving.

module.loaders je nyní module.rules

Stará konfigurace zavaděčů byla nahrazena výkonnějším systémem pravidel, který umožňuje konfiguraci zavaděčů a další. Z důvodů kompatibility je stará syntaxe module.loaders stále platná a staré názvy jsou analyzovány. Nové konvence pojmenování jsou srozumitelnější a jsou dobrým důvodem pro upgrade konfigurace na používání module.rules.

 module: {- loaders: }, { test: /\.jsx$/, loader: "babel-loader", // Do not use "use" here options: { // ... } } ] }

Řetězení zavaděčů

Stejně jako ve WebPacku 1 lze zavaděče řetězit a předávat tak výsledky z jednoho zavaděče do druhého. Pomocí konfigurační volby rule.use lze use nastavit na pole zavaděčů. Ve webpaku 1 se zavaděče běžně řetězily pomocí !. Tento styl je podporován pouze pomocí starší volby module.loaders.

 module: {- loaders: }] }

Odstraněno automatické rozšíření názvu modulu -loader

Při odkazování na loadery již není možné vynechat rozšíření -loader:

 module: { rules: } ] }

Stále se můžete rozhodnout pro staré chování pomocí konfigurační volby resolveLoader.moduleExtensions, ale nedoporučujeme to.

+ resolveLoader: {+ moduleExtensions: + }

Důvod této změny naleznete pod číslem 2986.

json-loader již není vyžadován

Pokud není pro soubor JSON nakonfigurován žádný zavaděč, Webpack se automaticky pokusí načíst soubor JSON pomocí json-loader.

 module: { rules: }

Rozhodli jsme se to udělat, abychom vyžehlili rozdíly v prostředí mezi webpackem, node.js a browserify.

Zavaděče v konfiguraci se překládají vzhledem ke kontextu

V systému webpack 1 se nakonfigurované zavaděče překládají vzhledem k odpovídajícímu souboru. Ve WebPacku 2 se však nakonfigurované zavaděče překládají relativně k volbě context.

To řeší některé problémy s duplicitními moduly způsobenými zavaděči při použití npm link nebo odkazování na moduly mimo context.

Můžete odstranit některé hacky, abyste to obešli:

 module: { rules: }, resolveLoader: {- root: path.resolve(__dirname, "node_modules") }

module.preLoaders a module.postLoaders byly odstraněny:

 module: {- preLoaders: }

UglifyJsPlugin sourceMap

Volba sourceMap z UglifyJsPlugin je nyní výchozí false místo true. To znamená, že pokud používáte zdrojové mapy pro minimalizovaný kód nebo chcete správná čísla řádků pro varování uglifyjs, musíte pro UglifyJsPlugin nastavit sourceMap: true.

 devtool: "source-map", plugins: 

UglifyJsPlugin warnings

Volba compress.warnings modulu UglifyJsPlugin je nyní výchozí hodnotou false místo true. To znamená, že pokud chcete vidět varování uglifyjs, musíte nastavit compress.warnings na true.

 devtool: "source-map", plugins: 

UglifyJsPlugin minimalizovat zavaděče

UglifyJsPlugin již nepřepíná zavaděče do režimu minimalizace. Nastavení minimize: true je třeba dlouhodobě předávat prostřednictvím voleb zavaděče. Příslušné volby naleznete v dokumentaci zavaděče.

Režim minimalizace pro zavaděče bude odstraněn ve WebPacku 3 nebo novějším.

Pro zachování kompatibility se starými zavaděči lze zavaděče přepnout do režimu minimalizace pomocí pluginu:

 plugins: 

DedupePlugin byl odstraněn

webpack.optimize.DedupePlugin již není potřeba. Odstraňte jej z konfigurace.

BannerPlugin – zlomová změna

BannerPlugin již nepřijímá dva parametry, ale jeden objekt možností.

 plugins: 

OccurrenceOrderPlugin je nyní ve výchozím nastavení zapnutý

Plugin OccurrenceOrderPlugin je nyní ve výchozím nastavení zapnutý a byl přejmenován (OccurenceOrderPlugin ve WebPacku 1). Ujistěte se tedy, že jste zásuvný modul z konfigurace odstranili:

 plugins: 

ExtractTextWebpackPlugin – zlomová změna

ExtractTextPlugin vyžaduje verzi 2, aby fungoval s webpackem 2.

npm install --save-dev extract-text-webpack-plugin

Změny konfigurace tohoto zásuvného modulu jsou především syntaktické.

module: { rules: }

new ExtractTextPlugin({options})

plugins: 

Plné dynamické požadavky nyní ve výchozím nastavení selhávají

Závislost obsahující pouze výraz (tj. require(expr)) nyní vytvoří prázdný kontext namísto kontextu celého adresáře.

Kód jako tento by měl být přeformulován, protože nebude fungovat s moduly ES2015. Pokud to není možné, můžete použít ContextReplacementPlugin, abyste překladači napověděli správné řešení.

Používání vlastních argumentů v CLI a konfiguraci

Pokud jste zneužili CLI k předávání vlastních argumentů do konfigurace takto:

webpack --custom-stuff

// webpack.config.jsvar customStuff = process.argv.indexOf('--custom-stuff') >= 0;/* ... */module.exports = config;

Můžete si všimnout, že to již není povoleno. CLI je nyní přísnější.

Na místo toho existuje rozhraní pro předávání argumentů konfiguraci. To by se mělo používat místo něj. Budoucí nástroje se na to mohou spoléhat.

webpack --env.customStuff

module.exports = function (env) { var customStuff = env.customStuff; /* ... */ return config;};

Viz CLI.

require.ensure a AMD require jsou asynchronní

Tyto funkce jsou nyní vždy asynchronní, místo aby se jejich zpětné volání volalo synchronně, pokud je kus již načten.

require.ensure Nyní závisí na nativních Promises. Pokud používáte require.ensure v prostředí, které je postrádá, budete potřebovat polyfill.

Konfigurace zavaděče probíhá prostřednictvím voleb

V zavaděči webpack.config.js již nelze konfigurovat vlastní vlastnost. Musí to být provedeno prostřednictvím options. Následující konfigurace pomocí vlastnosti ts již není ve WebPacku 2 platná:

module.exports = { //... module: { rules: , }, // does not work with webpack 2 ts: { transpileOnly: false },};

Co jsou to možnosti?

Dobrá otázka. No, přísně vzato jsou to 2 možné věci; oba způsoby konfigurace zavaděče webpack. Klasicky se options nazýval query a byl to řetězec, který bylo možné připojit k názvu zavaděče. Podobně jako řetězec dotazu, ale ve skutečnosti s většími pravomocemi:

module.exports = { //... module: { rules: , },};

Může to však být také samostatně zadaný objekt, který se dodává spolu se zavaděčem:

module.exports = { //... module: { rules: , },};

LoaderOptionsPlugin context

Některé zavaděče potřebují informace o kontextu a čtou je z konfigurace. Ty je třeba dlouhodobě předávat prostřednictvím voleb zavaděče. Příslušné volby najdete v dokumentaci zavaděče.

Pro zachování kompatibility se starými zavaděči lze tyto informace předávat prostřednictvím pluginu:

 plugins: 

debug

Volba debug přepnula zavaděče do režimu ladění v aplikaci Webpack 1. Toto je třeba předat přes volby zavaděče v dlouhodobém horizontu. Příslušné volby najdete v dokumentaci zavaděče.

Režim ladění pro zavaděče bude ve webpaku 3 nebo novějším odstraněn.

Pro zachování kompatibility se starými zavaděči lze zavaděče přepnout do režimu ladění pomocí zásuvného modulu:

- debug: true, plugins: 

Dělení kódu pomocí ES2015

Ve webpaku 1 bylo možné použít require.ensure() jako metodu pro líné načítání částí aplikace:

require.ensure(, function (require) { var foo = require('./module');});

Specifikace zavaděče ES2015 definuje import() jako metodu pro dynamické načítání modulů ES2015 za běhu. Webpack považuje import() za bod rozdělení a vloží požadovaný modul do samostatného chunku. import() přijímá název modulu jako argument a vrací slib (Promise).

function onClick() { import('./module') .then((module) => { return module.default; }) .catch((err) => { console.log('Chunk loading failed'); });}

Dobrá zpráva:

Dynamické výrazy

Je možné předat import() částečný výraz. To je řešeno podobně jako u výrazů v CommonJS (Webpack vytvoří kontext se všemi možnými soubory).

import() vytvoří pro každý možný modul samostatný chunk.

function route(path, query) { return import(`./routes/${path}/route`).then( (route) => new route.Route(query) );}// This creates a separate chunk for each possible route

Míchání ES2015 s AMD a CommonJS

Stejně jako u AMD a CommonJS můžete libovolně míchat všechny tři typy modulů (i v rámci jednoho souboru). Webpack se v tomto případě chová podobně jako Babel a node-eps:

// CommonJS consuming ES2015 Modulevar book = require('./book');book.currentPage;book.readPage();book.default === 'This is a book';

// ES2015 Module consuming CommonJSimport fs from 'fs'; // module.exports map to defaultimport { readFileSync } from 'fs'; // named exports are read from returned object+typeof fs.readFileSync === 'function';typeof readFileSync === 'function';

Důležité je poznamenat, že budete chtít říct Babelu, aby tyto symboly modulů nerozlišoval, aby je Webpack mohl použít. To můžete udělat nastavením následujících položek v možnostech .babelrc nebo babel-loader.

.babelrc

{ "presets": ]}

Nápovědy

Není třeba něco měnit, ale možnosti

Šablonové řetězce

webpack nyní podporuje šablonové řetězce ve výrazech. To znamená, že je můžete začít používat v konstrukcích webpaku:

- require("./templates/" + name);+ require(`./templates/${name}`);

Konfigurační příslib

webpack nyní podporuje vracení Promise z konfiguračního souboru. To umožňuje asynchronní zpracování v konfiguračním souboru.

webpack.config.js

module.exports = function () { return fetchLangs().then((lang) => ({ entry: '...', // ... plugins: , }));};

Pokročilé porovnávání zavaděčů

webpack nyní podporuje více věcí pro porovnávání zavaděčů.

module.exports = { //... module: { rules: , },};

Více možností CLI

Máte k dispozici několik nových možností CLI:

--define process.env.NODE_ENV="production" Viz DefinePlugin.

--display-depth zobrazuje vzdálenost ke vstupnímu bodu pro každý modul.

--display-used-exports zobrazí informace o tom, které exporty jsou v modulu použity.

--display-max-modules nastaví počet pro moduly zobrazené ve výstupu (výchozí hodnota je 15).

-p nyní také definuje process.env.NODE_ENV až "production".

Změny v zavaděčích

Změny důležité pouze pro autory zavaděčů.

Cacheable

Zavaděče jsou nyní ve výchozím nastavení cacheable. Zavaděče se musí odhlásit, pokud nejsou cacheable.

 // Cacheable loader module.exports = function(source) {- this.cacheable(); return source; }

 // Not cacheable loader module.exports = function(source) {+ this.cacheable(false); return source; }

Komplexní volby

webpack 1 podporuje pouze JSON.stringify-able volby pro zavaděče.

webpack 2 nyní podporuje libovolný JS objekt jako volby zavaděče.