Las siguientes secciones describen los principales cambios de webpack 1 a 2.

resolve.root, resolve.fallback, resolve.modulesDirectories

Estas opciones fueron reemplazadas por una sola opción resolve.modules. Ver resolver para más uso.

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

resolve.extensions

Esta opción ya no requiere pasar una cadena vacía. Este comportamiento se trasladó a resolve.enforceExtension. Ver resolver para más uso.

resolver.*

Aquí se cambiaron varias APIs. No se enumeran en detalle ya que no se utiliza comúnmente. Ver resolver para más detalles.

module.loaders es ahora module.rules

La antigua configuración de cargadores fue reemplazada por un sistema de reglas más potente, que permite la configuración de cargadores y más. Por razones de compatibilidad, la antigua sintaxis module.loaders sigue siendo válida y los antiguos nombres son analizados. Las nuevas convenciones de nomenclatura son más fáciles de entender y son una buena razón para actualizar la configuración para usar module.rules.

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

Cadenar cargadores

Al igual que en webpack 1, los cargadores se pueden encadenar para pasar los resultados de cargador a cargador. Usando la opción de configuración rule.use, use puede establecerse como una matriz de cargadores. En webpack 1, los cargadores se encadenaban comúnmente con !. Este estilo sólo se admite utilizando la opción heredada module.loaders.

 module: {- loaders: }] }

Se ha eliminado la extensión del nombre del módulo cargador

Ya no es posible omitir la extensión -loader cuando se hace referencia a los cargadores:

 module: { rules: } ] }

Todavía se puede optar por el comportamiento antiguo con la opción de configuración resolveLoader.moduleExtensions, pero no se recomienda.

+ resolveLoader: {+ moduleExtensions: + }

Ver #2986 para la razón detrás de este cambio.

El cargador json ya no es necesario

Cuando no se ha configurado ningún cargador para un archivo JSON, webpack intentará cargar automáticamente el archivo JSON con el json-loader.

 module: { rules: }

Hemos decidido hacer esto para limar las diferencias de entorno entre webpack, node.js y browserify.

Los cargadores en la configuración se resuelven en relación con el contexto

En webpack 1, los cargadores configurados se resuelven en relación con el archivo coincidente. Sin embargo, en webpack 2, los cargadores configurados se resuelven en relación con la opción context.

Esto resuelve algunos problemas con los módulos duplicados causados por los cargadores cuando se utiliza npm link o se hace referencia a los módulos fuera de la context.

Puede eliminar algunos hacks para trabajar alrededor de esto:

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

module.preLoaders y module.postLoaders fueron eliminados:

 module: {- preLoaders: }

UglifyJsPlugin sourceMap

La opción sourceMap del UglifyJsPlugin ahora está predeterminada a false en lugar de true. Esto significa que si usted está utilizando los mapas de origen para el código minimizado o desea corregir los números de línea para uglifyjs advertencias, es necesario establecer sourceMap: true para UglifyJsPlugin.

 devtool: "source-map", plugins: 

UglifyJsPlugin advertencias

La opción compress.warnings de la UglifyJsPlugin ahora por defecto a false en lugar de true. Esto significa que si usted quiere ver uglifyjs advertencias, es necesario establecer compress.warnings a true.

 devtool: "source-map", plugins: 

UglifyJsPlugin minimizar cargadores

UglifyJsPlugin ya no cambia los cargadores en modo de minimización. El ajuste minimize: true necesita ser pasado a través de las opciones del cargador en el largo plazo. Ver la documentación del cargador para las opciones relevantes.

El modo minimizar para los cargadores se eliminará en webpack 3 o posterior.

Para mantener la compatibilidad con los cargadores antiguos, los cargadores se pueden cambiar al modo minimizar a través del plugin:

 plugins: 

DedupePlugin se ha eliminado

webpack.optimize.DedupePlugin ya no es necesario. Elimínelo de su configuración.

BannerPlugin – cambio de ruptura

BannerPlugin ya no acepta dos parámetros, sino un solo objeto de opciones.

 plugins: 

OccurrenceOrderPlugin está ahora activado por defecto

El OccurrenceOrderPlugin está ahora activado por defecto y ha sido renombrado (OccurenceOrderPlugin en webpack 1). Por lo tanto, asegúrese de eliminar el plugin de su configuración:

 plugins: 

ExtractTextWebpackPlugin – cambio de ruptura

ExtractTextPlugin requiere la versión 2 para trabajar con webpack 2.

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

Los cambios de configuración para este plugin son principalmente sintácticos.

module: { rules: }

new ExtractTextPlugin({options})

plugins: 

Los requerimientos dinámicos completos ahora fallan por defecto

Una dependencia con sólo una expresión (i. e. require(expr)) ahora creará un contexto vacío en lugar del contexto del directorio completo.

Código como este debería ser refactorizado ya que no funcionará con módulos ES2015. Si esto no es posible se puede utilizar el ContextReplacementPlugin para dar una pista al compilador hacia la resolución correcta.

Usando argumentos personalizados en la CLI y la configuración

Si abusaste de la CLI para pasar argumentos personalizados a la configuración así:

webpack --custom-stuff

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

Podrás notar que esto ya no está permitido. El CLI es más estricto ahora.

En su lugar hay una interfaz para pasar argumentos a la configuración. Esto debe ser utilizado en su lugar. Futuras herramientas pueden depender de esto.

webpack --env.customStuff

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

Ver CLI.

require.ensure y AMD require son asíncronos

Estas funciones son ahora siempre asíncronas en lugar de llamar a su callback de forma sincrónica si el chunk ya está cargado.

require.ensure ahora depende de Promises nativos. Si se utiliza require.ensure en un entorno que carece de ellos entonces se necesitará un polyfill.

La configuración del cargador es a través de opciones

Ya no se puede configurar un cargador con una propiedad personalizada en el webpack.config.js. Debe hacerse a través del options. La siguiente configuración con la propiedad ts ya no es válida con webpack 2:

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

¿Qué son las opciones?

Buena pregunta. Bueno, estrictamente hablando son 2 cosas posibles; ambas formas de configurar un cargador de webpack. Clásicamente options se llamaba query y era una cadena que se podía anexar al nombre del cargador. Muy parecido a una cadena de consulta, pero en realidad con mayores poderes:

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

Pero también puede ser un objeto especificado por separado que se suministra junto a un cargador:

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

LoaderOptionsPlugin context

Algunos cargadores necesitan información de contexto y los leen desde la configuración. Esto necesita ser pasado a través de las opciones del cargador en el largo plazo. Ver la documentación del cargador para las opciones relevantes.

Para mantener la compatibilidad con los cargadores antiguos, esta información puede pasarse vía plugin:

 plugins: 

debug

La opción debug cambió los cargadores al modo debug en webpack 1. Esto necesita ser pasado a través de las opciones del cargador en el largo plazo. Ver la documentación del cargador para las opciones relevantes.

El modo de depuración para los cargadores se eliminará en webpack 3 o posterior.

Para mantener la compatibilidad con los cargadores antiguos, los cargadores se pueden cambiar al modo de depuración a través de un plugin:

- debug: true, plugins: 

División de código con ES2015

En webpack 1, se podía utilizar require.ensure() como método para cargar perezosamente trozos para su aplicación:

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

La especificación del cargador ES2015 define import() como método para cargar módulos ES2015 dinámicamente en tiempo de ejecución. webpack trata import() como un punto de división y pone el módulo solicitado en un chunk separado. import() toma el nombre del módulo como argumento y devuelve una Promise.

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

Buenas noticias: Los fallos en la carga de un chunk ahora se pueden manejar porque están basados en Promise.

Expresiones dinámicas

Es posible pasar una expresión parcial a import(). Esto se maneja de forma similar a las expresiones en CommonJS (webpack crea un contexto con todos los archivos posibles).

import()Crea un chunk separado para cada módulo posible.

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

Mezcla de ES2015 con AMD y CommonJS

Al igual que para AMD y CommonJS puedes mezclar libremente los tres tipos de módulos (incluso dentro del mismo archivo). webpack se comporta de forma similar a babel y node-eps en este caso:

// 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';

Es importante tener en cuenta que querrás decirle a Babel que no analice estos símbolos del módulo para que webpack pueda utilizarlos. Puedes hacer esto estableciendo lo siguiente en tus opciones .babelrc o babel-loader.

.babelrc

{ "presets": ]}

Sugerencias

No hace falta cambiar nada, pero sí oportunidades

Cadenas de plantilla

webpack ahora soporta cadenas de plantilla en expresiones. Esto significa que puedes empezar a usarlas en construcciones de webpack:

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

Promesa de configuración

webpack ahora soporta devolver un Promise desde el archivo de configuración. Esto permite el procesamiento asíncrono en su archivo de configuración.

webpack.config.js

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

Comparación avanzada de cargadores

webpack ahora soporta más cosas para comparar los cargadores.

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

Más opciones de la CLI

Hay algunas opciones nuevas de la CLI para que puedas usar:

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

--display-depthMuestra la distancia al punto de entrada de cada módulo.

--display-used-exports muestra información sobre qué exportaciones se utilizan en un módulo.

--display-max-modules establece el número de módulos que se muestran en la salida (por defecto es 15).

-pTambién define process.env.NODE_ENV a "production" ahora.

Cambios en los cargadores

Cambios sólo relevantes para los autores de cargadores.

Cacheable

Los cargadores son ahora cacheables por defecto. Los cargadores deben optar por no hacerlo si no son almacenables en caché.

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

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

Opciones complejas

webpack 1 sólo admite opciones JSON.stringifyhabilitadas para cargadores.

webpack 2 ahora admite cualquier objeto JS como opciones del cargador.