Seuraavissa osioissa kuvataan tärkeimmät muutokset webpack 1:stä 2:een.

resolve.root, resolve.fallback, resolve.modulesDirectories

Nämä optiot korvattiin yhdellä optiolla resolve.modules. Katso lisätietoja käytöstä kohdasta resolving.

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

resolve.extensions

Tämä vaihtoehto ei enää vaadi tyhjän merkkijonon välittämistä. Tämä käyttäytyminen siirrettiin kohtaan resolve.enforceExtension. Katso resolving lisää käytöstä.

resolve.*

Tässä muutettiin useita API:ita. Ei lueteltu yksityiskohtaisesti, koska sitä ei käytetä yleisesti. Katso resolving lisätietoja.

module.loaders on nyt module.rules

Vanha lataajien konfigurointi korvattiin tehokkaammalla sääntöjärjestelmällä, joka mahdollistaa lataajien konfiguroinnin ja muuta. Yhteensopivuussyistä vanha module.loaders-syntaksi on edelleen voimassa ja vanhat nimet jäsennetään. Uudet nimeämiskäytännöt ovat helpommin ymmärrettäviä ja ovat hyvä syy päivittää konfiguraatio käyttämään module.rules.

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

Laatijoiden ketjuttaminen

Kuten webpack 1:ssä, myös tässä voidaan ketjuttaa laatijoita, jotta tuloksia voidaan siirtää laatijalta toiselle. Käyttämällä rule.use-konfiguraatiovaihtoehtoa, use voidaan asettaa joukko loadereita. Webpack 1:ssä loaderit ketjutettiin yleisesti !:llä. Tätä tyyliä tuetaan vain käyttämällä vanhaa asetusvaihtoehtoa module.loaders.

 module: {- loaders: }] }

Automaattinen -loader-moduulin nimilaajennus poistettu

Laajennusta -loader ei voi enää jättää pois, kun viitataan loadereihin:

 module: { rules: } ] }

Vanhaan käytökseen voi vielä valita asetusvaihtoehdon resolveLoader.moduleExtensions avulla, mutta sitä ei suositella.

+ resolveLoader: {+ moduleExtensions: + }

Katso #2986 tämän muutoksen syytä.

json-loaderia ei enää tarvita

Kun JSON-tiedostolle ei ole määritetty lataajaa, webpack yrittää automaattisesti ladata JSON-tiedoston json-loader:n avulla.

 module: { rules: }

Päätimme tehdä tämän, jotta webpackin, node.js:n ja browserify:n väliset ympäristöerot saataisiin korjattua.

Konfiguraatiossa olevat lataajat resolvoituvat suhteessa kontekstiin

Webpack 1:ssä konfiguroidut lataajat resolvoituvat suhteessa sovitettuun tiedostoon. Kuitenkin webpack 2:ssa konfiguroidut lataajat resolvoituvat suhteessa context-vaihtoehtoon.

Tämä ratkaisee joitain ongelmia päällekkäisten moduulien kanssa, joita lataajat aiheuttavat käytettäessä npm link tai viitattaessa moduuleihin context:n ulkopuolella.

Voit poistaa joitain hakkereita, joilla voit kiertää tämän:

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

module.preLoaders ja module.postLoaders poistettiin:

 module: {- preLoaders: }

UglifyJsPlugin sourceMap

UglifyJsPlugin:n sourceMap vaihtoehdon sourceMap oletusarvo on nyt false eikä true. Tämä tarkoittaa, että jos käytät lähdekarttoja minimoidulle koodille tai haluat oikeat rivinumerot uglifyjs-varoituksille, sinun on asetettava sourceMap: true kohtaan UglifyJsPlugin.

 devtool: "source-map", plugins: 

UglifyJsPlugin warnings

Vaihtoehdon UglifyJsPlugin compress.warnings oletusarvo on nyt false eikä true. Tämä tarkoittaa, että jos haluat nähdä uglifyjs-varoitukset, sinun on asetettava compress.warnings arvoksi true.

 devtool: "source-map", plugins: 

UglifyJsPlugin minimize loaders

UglifyJsPlugin ei enää kytke loaders minimize-tilaan. Asetus minimize: true on välitettävä latausasetusten kautta pitkällä aikavälillä. Katso loaderin dokumentaatiosta asiaankuuluvat asetukset.

Loadereiden minimize-tila poistetaan webpack 3:ssa tai uudemmissa.

Yhteensopivuuden säilyttämiseksi vanhojen loadereiden kanssa loaderit voidaan kytkeä minimize-tilaan pluginin kautta:

 plugins: 

DedupePlugin on poistettu

webpack.optimize.DedupePlugin ei tarvita enää. Poista se konfiguraatiostasi.

BannerPlugin – breaking change

BannerPlugin ei enää hyväksy kahta parametria, vaan yhden options-olion.

 plugins: 

OccurrenceOrderPlugin on nyt oletusarvoisesti päällä

Taajuusliitännäiset OccurrenceOrderPlugin on nyt oletusarvoisesti käytössä, ja se on nimetty uudestaan (webpack 1:ssä oli nimenä OccurenceOrderPlugin). Varmista siis, että poistat pluginin konfiguraatiostasi:

 plugins: 

ExtractTextWebpackPlugin – breaking change

ExtractTextPlugin vaatii version 2 toimiakseen webpack 2:n kanssa.

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

Konfiguraatiomuutokset tämän pluginin osalta ovat lähinnä syntaktisia.

module: { rules: }

new ExtractTextPlugin({options})

plugins: 

Täydelliset dynaamiset vaatimukset epäonnistuvat nyt oletusarvoisesti

Riippuvuus, joka sisältää vain lausekkeen (esim. require(expr)), luo nyt tyhjän kontekstin kokonaisen hakemistokontekstin sijaan.

Tämmöisen kaltainen koodi olisi refaktoroitava, sillä se ei toimi ES2015-moduulien kanssa. Jos tämä ei ole mahdollista, voit käyttää ContextReplacementPlugin vihjeitä kääntäjälle oikean resoluution suuntaan.

Kustomoitujen argumenttien käyttäminen CLI:ssä ja konfiguraatiossa

Jos olet väärinkäyttänyt CLI:tä välittääksesi konfiguraatioon custom-argumentteja näin:

webpack --custom-stuff

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

Olet ehkä huomannut, että tämä ei ole enää sallittu. CLI on nyt tiukempi.

Sen sijaan on olemassa rajapinta argumenttien välittämistä varten kokoonpanoon. Tätä tulisi käyttää sen sijaan. Tulevat työkalut saattavat luottaa tähän.

webpack --env.customStuff

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

Katso CLI.

require.ensure ja AMD require ovat asynkronisia

Nämä funktiot ovat nyt aina asynkronisia sen sijaan, että ne kutsuisivat takaisinkutsuaan synkronisesti, jos lohko on jo ladattu.

require.ensureriippuvainen natiiveista Promisesistä. Jos käytät require.ensure:tä ympäristössä, josta ne puuttuvat, tarvitset polyfillin.

Loader-konfigurointi tapahtuu optioiden kautta

Loaderia ei voi enää konfiguroida mukautetulla ominaisuudella webpack.config.js:ssä. Se on tehtävä options kautta. Seuraava konfigurointi ts-ominaisuudella ei ole enää voimassa webpack 2:ssa:

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

Mitä ovat optiot?

Hyvä kysymys. No, tarkalleen ottaen kyseessä on 2 mahdollista asiaa; molemmat tavat konfiguroida webpack-kuormaaja. Klassisesti options oli nimeltään query ja se oli merkkijono, joka voitiin liittää lataajan nimeen. Vähän kuin kyselymerkkijono, mutta oikeastaan suuremmilla valtuuksilla:

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

Mutta se voi olla myös erikseen määritetty objekti, joka toimitetaan lataajan mukana:

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

LoaderOptionsPlugin context

Jotkut lataajat tarvitsevat kontekstitietoja ja lukevat ne konfiguraatiosta. Tämä on välitettävä loader optionsin kautta pitkäkestoisesti. Katso asiaankuuluvat optiot loader-dokumentaatiosta.

Yhteensopivuuden säilyttämiseksi vanhojen loadereiden kanssa nämä tiedot voidaan välittää pluginin kautta:

 plugins: 

debug

Vaihtoehto debug kytki loaderit debug-tilaan webpack 1:ssä. Tämä on välitettävä latausoptioiden kautta pitkäkestoisesti. Katso asiaankuuluvat optiot loader-dokumentaatiosta.

Loaderien debug-tila poistetaan webpack 3:ssa tai uudemmissa.

Voidaksesi säilyttää yhteensopivuuden vanhojen loadereiden kanssa, loaderit voidaan kytkeä debug-tilaan pluginin kautta:

- debug: true, plugins: 

Code Splitting with ES2015

Webpack 1:ssä voit käyttää require.ensure() metodina, jolla voit ladata laiskasti chunksia sovellukseesi:

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

ES2015 Loader spekseissä määritellään import() metodina, jolla voidaan ladata ES2015 moduuleja dynaamisesti suoritusajankohtana. webpack käsittelee import():tä jakopisteenä ja asettaa pyydetyn moduulin erilliseen chunkkiin. import() ottaa argumenttina moduulin nimen ja palauttaa Promisen.

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

Hyviä uutisia: Epäonnistunut chunkin lataaminen voidaan nyt käsitellä, koska ne ovat Promise-pohjaisia.

Dynaamiset lausekkeet

Voidaan antaa osittainen lauseke import():lle. Tätä käsitellään samalla tavalla kuin lausekkeita CommonJS:ssä (webpack luo kontekstin, jossa on kaikki mahdolliset tiedostot).

import() luo erillisen lohkon jokaiselle mahdolliselle moduulille.

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:n sekoittaminen AMD:n ja CommonJS:n kanssa

Kuten AMD:n ja CommonJS:n kohdalla voit sekoittaa vapaasti kaikkia kolmea moduulityyppiä toisiinsa (jopa saman tiedoston sisällä). webpack käyttäytyy tässä tapauksessa samalla tavalla kuin babel ja 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';

On tärkeää huomata, että haluat kertoa Babelille, ettei se parseeraa näitä moduulisymboleja, jotta webpack voi käyttää niitä. Voit tehdä tämän asettamalla seuraavat asetukset .babelrc– tai babel-loader-asetuksissa.

.babelrc

{ "presets": ]}

Vihjeitä

Ei tarvitse muuttaa mitään, mutta mahdollisuuksia

Mallimerkkijonot

webpack tukee nyt mallimerkkijonoja lausekkeissa. Tämä tarkoittaa, että voit alkaa käyttää niitä webpackin konstruktioissa:

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

Konfiguraatiolupaus

webpack tukee nyt Promise:n palauttamista konfiguraatiotiedostosta. Tämä mahdollistaa asynkronisen käsittelyn konfiguraatiotiedostossasi.

webpack.config.js

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

Advanced loader matching

webpack tukee nyt useampia asioita, joiden perusteella lataajia voi hakea.

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

Lisää CLI-vaihtoehtoja

Tässä on joitain uusia CLI-vaihtoehtoja, joita voit käyttää:

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

--display-depth näyttää etäisyyden kunkin moduulin sisäänmenopisteeseen.

--display-used-exports näyttää tiedot siitä, mitä vientejä moduulissa käytetään.

--display-max-modules asettaa tulosteessa näytettävien moduulien määrän (oletusarvo on 15).

-p määrittelee myös process.env.NODE_ENV nyt "production":lle.

Loader-muutokset

Muutokset, joilla on merkitystä vain loaderien kirjoittajille.

Välimuistiinpanokelpoinen

Loaderit ovat nyt oletusarvoisesti välimuistissa. Lataajien täytyy kieltäytyä, jos ne eivät ole välimuistittavissa.

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

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

Kompleksiset optiot

webpack 1 tukee vain JSON.stringify-kelpoisia optioita lataajille.

webpack 2 tukee nyt mitä tahansa JS-objekteja lataajien optioina.