A következő szakaszok a webpack 1-ről 2-re történő főbb változásokat írják le.

resolve.root, resolve.fallback, resolve.modulesDirectories

Ezeket az opciókat egyetlen opció váltotta fel resolve.modules. További használatért lásd a resolving.

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

resolve.extensions

Ez az opció már nem igényel üres karakterlánc átadását. Ez a viselkedés átkerült a resolve.enforceExtension-be. További használatért lásd a resolving.

resolve.*

Ezzel kapcsolatban több API is változott. Nem soroljuk fel részletesen, mivel nem általánosan használt. Lásd resolving a részletekért.

module.loaders most module.rules

A régi betöltő konfigurációt felváltotta egy erősebb szabályrendszer, amely lehetővé teszi a betöltők konfigurálását és egyebeket. Kompatibilitási okokból a régi module.loaders szintaxis továbbra is érvényes, és a régi neveket elemzi. Az új elnevezési konvenciók könnyebben érthetőek, és jó ok arra, hogy a konfigurációt frissítsük a module.rules használatára.

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

Feltöltők láncolása

A webpack 1-hez hasonlóan a betöltők láncolhatók, hogy az eredményeket betöltőről betöltőre adjuk át. A rule.use konfigurációs opció használatával a use beállítható a betöltők tömbjére. A webpack 1-ben a betöltők általában a !-vel voltak láncolva. Ez a stílus csak a régi module.loaders opció használatával támogatott.

 module: {- loaders: }] }

Automatic -loader module name extension removed

A loaderekre való hivatkozáskor már nem lehet kihagyni a -loader kiterjesztést:

 module: { rules: } ] }

A régi viselkedést a resolveLoader.moduleExtensions konfigurációs opcióval még választhatja, de ez nem ajánlott.

+ resolveLoader: {+ moduleExtensions: + }

A változtatás okát lásd a #2986-ban.

a json-loader többé nem szükséges

Ha egy JSON fájlhoz nincs betöltő konfigurálva, a webpack automatikusan megpróbálja betölteni a JSON fájlt a json-loader segítségével.

 module: { rules: }

A webpack, a node.js és a browserify közötti környezeti különbségek kiküszöbölése érdekében döntöttünk így.

A konfigurációban lévő betöltők a kontextushoz képest oldanak fel

A webpack 1-ben a konfigurált betöltők a megfelelő fájlhoz képest oldanak fel. A webpack 2-ben azonban a konfigurált betöltők a context opcióhoz képest oldanak fel.

Ez megold néhány, a betöltők által okozott duplikált modulokkal kapcsolatos problémát, amikor a npm link vagy a context-n kívüli modulokra való hivatkozással használjuk.

El lehet távolítani néhány hacket, hogy ezt megkerüljük:

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

A module.preLoaders és module.postLoaders eltávolításra került:

 module: {- preLoaders: }

UglifyJsPlugin sourceMap

A UglifyJsPlugin sourceMap opciója mostantól true helyett false az alapértelmezett érték. Ez azt jelenti, hogy ha minimalizált kódhoz használ forráskártyákat, vagy helyes sorszámokat szeretne az uglifyjs figyelmeztetésekhez, akkor a UglifyJsPlugin-hez sourceMap: true kell beállítania.

 devtool: "source-map", plugins: 

UglifyJsPlugin warnings

A UglifyJsPlugin compress.warnings opciója mostantól true helyett false az alapértelmezett. Ez azt jelenti, hogy ha látni szeretné az uglifyjs figyelmeztetéseket, akkor a compress.warnings-t true-re kell állítani.

 devtool: "source-map", plugins: 

UglifyJsPlugin minimize loaders

UglifyJsPlugin többé nem kapcsolja a betöltőket minimize módba. A minimize: true beállítást hosszú távon a betöltő opciókkal kell átadni. A vonatkozó opciókat lásd a betöltő dokumentációjában.

A betöltők minimize üzemmódja a webpack 3-ban vagy későbbi verziókban megszűnik.

A régi betöltőkkel való kompatibilitás megőrzése érdekében a betöltők minimalize üzemmódba kapcsolhatók a plugin segítségével:

 plugins: 

A DedupePlugin eltávolításra került

webpack.optimize.DedupePlugin már nincs rá szükség. Távolítsd el a konfigurációdból.

BannerPlugin – breaking change

BannerPlugin már nem fogad el két paramétert, hanem egyetlen options objektumot.

 plugins: 

OccurrenceOrderPlugin most már alapértelmezetten be van kapcsolva

A OccurrenceOrderPlugin most már alapértelmezetten engedélyezve van és át lett nevezve (OccurenceOrderPlugin a webpack 1-ben). Így mindenképpen távolítsa el a plugint a konfigurációjából:

 plugins: 

ExtractTextWebpackPlugin – breaking change

ExtractTextPlugin a 2-es verzióra van szükség a webpack 2-vel való működéshez.

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

A plugin konfigurációs változásai elsősorban szintaktikaiak.

module: { rules: }

new ExtractTextPlugin({options})

plugins: 

A teljes dinamikus követelmények mostantól alapértelmezés szerint nem működnek

A csak egy kifejezést tartalmazó függőség (pl. require(expr)) mostantól egy üres kontextust hoz létre a teljes könyvtár kontextusa helyett.

Az ilyen kódot refaktorálni kell, mivel nem fog működni az ES2015 modulokkal. Ha ez nem lehetséges, akkor a ContextReplacementPlugin segítségével utalhat a fordítónak a helyes feloldásra.

Egyéni argumentumok használata a CLI-ben és a konfigurációban

Ha visszaélt a CLI-vel, hogy egyéni argumentumokat adjon át a konfigurációnak, például így:

webpack --custom-stuff

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

Elképzelhető, hogy ez már nem megengedett. A CLI most már szigorúbb.

Ehelyett van egy interfész az argumentumok átadására a konfigurációnak. Ezt kell használni helyette. A jövőbeli eszközök erre támaszkodhatnak.

webpack --env.customStuff

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

Vö. CLI.

require.ensure és AMD require aszinkron

Ezek a függvények mostantól mindig aszinkronok, ahelyett, hogy szinkron hívnák a callbackjüket, ha a chunk már betöltődött.

require.ensure Mostantól a natív Promiseektől függ. Ha olyan környezetben használja a require.ensure-öt, ahol ezek hiányoznak, akkor egy polyfillre lesz szüksége.

A betöltő konfigurálása opciókkal történik

A betöltőt már nem lehet a webpack.config.js-ben lévő egyéni tulajdonsággal konfigurálni. Ezt a optionsen keresztül kell megtenni. A következő konfiguráció a ts tulajdonsággal már nem érvényes a webpack 2-vel:

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

Mi az opciók?

Jó kérdés. Nos, szigorúan véve 2 lehetséges dologról van szó; mindkettő módja a webpack betöltő konfigurálásának. Klasszikusan options query volt a neve, és egy string volt, amit a betöltő nevéhez lehetett csatolni. Nagyjából olyan, mint egy lekérdezési karakterlánc, de valójában nagyobb hatalommal:

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

De lehet egy külön megadott objektum is, amit a betöltő mellett adunk meg:

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

LoaderOptionsPlugin context

Némely betöltőnek szüksége van kontextus információkra, és ezeket a konfigurációból olvassa be. Ezt a loader opciókkal kell átadni a hosszútávon. A vonatkozó opciókat lásd a betöltő dokumentációjában.

A régi betöltőkkel való kompatibilitás megőrzése érdekében ez az információ átadható pluginon keresztül:

 plugins: 

debug

A debug opció a webpack 1-ben debug módba kapcsolta a betöltőket. Ezt hosszútávon a betöltő opcióin keresztül kell átadni. A vonatkozó opciókat lásd a betöltő dokumentációjában.

A betöltők debug üzemmódja a webpack 3-ban vagy később megszűnik.

A régi betöltőkkel való kompatibilitás megőrzése érdekében a betöltők egy plugin segítségével debug módba kapcsolhatók:

- debug: true, plugins: 

Code Splitting with ES2015

A webpack 1-ben a require.ensure() módszerrel lustán tölthetünk be darabokat az alkalmazásunkba:

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

Az ES2015 Loader spec definiálja a import() módszert az ES2015 modulok dinamikus betöltésére futásidőben. A webpack a import()-t osztópontként kezeli, és a kért modult egy külön chunkba helyezi. A import() a modul nevét veszi argumentumként, és egy Promise-t ad vissza.

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

Jó hírek: A chunk betöltésének sikertelensége most már kezelhető, mivel ezek Promise alapúak.

Dinamikus kifejezések

Egy részleges kifejezést lehet átadni a import()-nek. Ezt a CommonJS-ben lévő kifejezésekhez hasonlóan kezelik (a webpack létrehoz egy kontextust az összes lehetséges fájlból).

import() minden lehetséges modulhoz külön chunkot hoz létre.

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

Es2015 keverése AMD-vel és CommonJS-szel

Az AMD és CommonJS esetében is szabadon keverhetjük mindhárom modultípust (akár egy fájlon belül is). A webpack ebben az esetben hasonlóan viselkedik, mint a babel és 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';

Fontos megjegyezni, hogy meg kell mondani a Babelnek, hogy ne elemezze ezeket a modulszimbólumokat, hogy a webpack használni tudja őket. Ezt a .babelrc vagy babel-loader opciókban a következők beállításával teheted meg.

.babelrc

{ "presets": ]}

Hints

Nem kell valamit megváltoztatni, de lehetőségek

Sablonsorok

A webpack mostantól támogatja a sablonsorokat a kifejezésekben. Ez azt jelenti, hogy elkezdheted használni őket a webpack konstrukciókban:

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

Konfigurációs ígéret

a webpack mostantól támogatja egy Promise visszaadását a konfigurációs fájlból. Ez lehetővé teszi az aszinkron feldolgozást a konfigurációs fájlban.

webpack.config.js

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

Advanced loader matching

a webpack mostantól több dolgot támogat a betöltőkhöz való illesztéshez.

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

Még több CLI-opció

Új CLI-opciókat használhatsz:

--define process.env.NODE_ENV="production" Lásd DefinePlugin.

--display-depth megjeleníti az egyes modulok belépési pontjának távolságát.

--display-used-exports megjeleníti az információt arról, hogy egy modulban mely exportok vannak felhasználva.

--display-max-modules beállítja a kimeneten megjelenített modulok számát (alapértelmezett érték 15).

-p mostantól process.env.NODE_ENV a "production"-nak is meghatározza.

Loader változások

Változások csak a loader szerzők számára relevánsak.

Cacheable

A loaderek mostantól alapértelmezés szerint cache-elhetőek. A betöltőknek le kell mondaniuk, ha nem cache-elhetőek.

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

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

Komplex opciók

A webpack 1 csak a JSON.stringify-ezhető opciókat támogatja a betöltőkhöz.

A webpack 2 mostantól bármilyen JS objektumot támogat betöltő opcióként.