Webpack2

resolve.root, resolve.fallback, resolve.modulesDirectories

resolve.modules. resolve resolving.

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

resolve.extensions

resolve.enforceExtension resolve resolving.

resolve.*

resolving.

module.loaders module.rules

loadersrulesmodule.loadersloaders

loadermodule.rules

  module: {
-   loaders: [
+   rules: [
      {
        test: /\.css$/,
-       loaders: [
+       use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
-           query: {
+           options: {
              modules: true
            }
          }
        ]
      },
      {
        test: /\.jsx$/,
        loader: "babel-loader", // Do not use "use" here
        options: {
          // ...
        }
      }
    ]
  }

loaders

webpack1.Xloadersloader rule.use

wepback2useloadersweback1loaders !``module.loaders

  module: {
-   loaders: {
+   rules: {
      test: /\.less$/,
-     loader: "style-loader!css-loader!less-loader"
+     use: [
+       "style-loader",
+       "css-loader",
+       "less-loader"
+     ]
    }
  }

##module -loader

loader-loaderloader

  module: {
    rules: [
      {
        use: [
-         "style",
+         "style-loader",
-         "css",
+         "css-loader",
-         "less",
+         "less-loader",
        ]
      }
    ]
  }

resolveLoader.moduleExtensions

+ resolveLoader: {
+   moduleExtensions: ["-loader"]
+ }

#2986

json-loader

jsonloaderwebpack2 json-loaderjson

  module: {
    rules: [
-     {
-       test: /\.json/,
-       loader: "json-loader"
-     }
    ]
  }

jsonwebpack, node.js and browserify

loader``context

webpack 1loaderrequire.resolvewebpack 2loadercontextnpmcontext

  module: {
    rules: [
      {
        // ...
-       loader: require.resolve("my-loader")
+       loader: "my-loader"
      }
    ]
  },
  resolveLoader: {
-   root: path.resolve(__dirname, "node_modules")
  }

module.preLoaders module.postLoaders

  module: {
-   preLoaders: [
+   rules: [
      {
        test: /\.js$/,
+       enforce: "pre",
        loader: "eslint-loader"
      }
    ]
  }

preLoaderrulesenfore

UglifyJsPlugin sourceMap

UglifyJsPlugin``sourceMap true false

jsUglifyJsPlugin sourceMap: true

  devtool: "source-map",
  plugins: [
    new UglifyJsPlugin({
+     sourceMap: true
    })
  ]

UglifyJsPlugin

UglifyJsPlugin compress.warnings true false

jscompress.warnings true

  devtool: "source-map",
  plugins: [
    new UglifyJsPlugin({
+     compress: {
+       warnings: true
+     }
    })
  ]

UglifyJsPlugin Loaders

UglifyJsPlugin Loaders debug Loaders webpack

loadewebpack 3.

loader LoaderOptionsPlugin

  plugins: [
+   new webpack.LoaderOptionsPlugin({
+     minimize: true
+   })
  ]

DedupePlugin

webpack.optimize.DedupePlugin . .

BannerPlugin

BannerPlugin .

  plugins: [
-    new webpack.BannerPlugin('Banner', {raw: true, entryOnly: true});
+    new webpack.BannerPlugin({banner: 'Banner', raw: true, entryOnly: true});
  ]

OccurrenceOrderPlugin

OccurrenceOrderPlugin

  plugins: [
-   new webpack.optimize.OccurrenceOrderPlugin()
  ]

ExtractTextWebpackPlugin

ExtractTextPlugin ] 1.0.0 webpack v2ExtractTextPlugin webpack2.

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

ExtractTextPluginwepback2

ExtractTextPlugin.extract

module: {
  rules: [
    test: /.css$/,
-    loader: ExtractTextPlugin.extract("style-loader", "css-loader", { publicPath: "/dist" })
+    loader: ExtractTextPlugin.extract({
+      fallbackLoader: "style-loader",
+      loader: "css-loader",
+      publicPath: "/dist"
+    })
  ]
}

new ExtractTextPlugin({options})

plugins: [
-  new ExtractTextPlugin("bundle.css", { allChunks: true, disable: false })
+  new ExtractTextPlugin({
+    filename: "bundle.css",
+    disable: false,
+    allChunks: true
+  })
]

(i. e. require(expr))contextcontext

es2015ContextReplacementPlugin

###Cli

cli

webpack --custom-stuff

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

cli

webpack --env.customStuff

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

CLI.

##require.ensure AMD require

require.ensure``amd require

require.ensurePromise require.ensure Promisepolyfill.

Loaderoptions

webpack.config.jslodertswebpack2

module.exports = {
  ...
  module: {
    rules: [{
      test: /\.tsx?$/,
      loader: 'ts-loader'
    }]
  },
  // does not work with webpack 2
  ts: { transpileOnly: false }
}

options?

custom property``optionswebpack loaderoptions``queryloaderurl:

module.exports = {
  ...
  module: {
    rules: [{
      test: /\.tsx?$/,
      loader: 'ts-loader?' + JSON.stringify({ transpileOnly: false })
    }]
  }
}

optionsloader

module.exports = {
  ...
  module: {
    rules: [{
      test: /\.tsx?$/,
      loader: 'ts-loader',
      options:  { transpileOnly: false }
    }]
  }
}

LoaderOptionsPlugin context

loadercontext loaderloader

loader

  plugins: [
+   new webpack.LoaderOptionsPlugin({
+     options: {
+       context: __dirname
+     }
+   })
  ]

debug

debugloaderwebpack1webpack2loaderloader

loderdebugwebpack3.0

loader

- debug: true,
  plugins: [
+   new webpack.LoaderOptionsPlugin({
+     debug: true
+   })
  ]

Code Splitting with ES2015

webpack1require.ensure``chunks

require.ensure([], function(require) {
  var foo = require("./module");
});

es2015 loaderimport()ES2015

webpackimport()chunkwebpack2 ES6 webpack 2 import``export

import()``Promise

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

Promise

require.ensurechunkimport APIrequire.ensure

require.ensure([], function(require) {
  var foo = require("./module");
}, "custom-chunk-name");

System.importwebpack System.import``import v2.1.0-beta.28)

Babelimport dynamic-import babelStage 3

Dynamic expressions

import()CommonJSrequire(), CommonJS webpack

import() moduleseparte 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

ES2015 AMD CommonJS

AMD CommonJS

// CommonJS consuming ES2015 Module
var book = require("./book");

book.currentPage;
book.readPage();
book.default === "This is a book";

// ES2015 Module consuming CommonJS
import fs from "fs"; // module.exports map to default
import { readFileSync } from "fs"; // named exports are read from returned object+

typeof fs.readFileSync === "function";
typeof readFileSync === "function";

es2015 balel ES6 CommonJS webpack ES6 es2015-webpack babelbabelmodule symbolswebpackbabel

.babelrc

{
  "presets": [
    ["es2015", { "modules": false }]
  ]
}

Hints

No need to change something, but opportunities

Template strings

webpack

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

###Promise

webpackPromise

webpack.config.js

module.exports = function() {
  return fetchLangs().then(lang => ({
    entry: "...",
    // ...
    plugins: [
      new DefinePlugin({ LANGUAGE: lang })
    ]
  }));
};

Loader

webpackloader

module: {
  rules: [
    {
      resource: /filename/, // matches "/path/filename.js"
      resourceQuery: /querystring/, // matches "/filename.js?querystring"
      issuer: /filename/, // matches "/path/something.js" if requested from "/path/filename.js"
    }
  ]
}

CLI

CLI :

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

--display-depth entrymodule

--display-used-exports module.

--display-max-modulesoutput (15).

-p process.env.NODE_ENV "production"

Cacheable

Loadersloader

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

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

Complex options

webpack1loaderJSON.stringify-ablejson

webpack2loaderJS

identloader

require("some-loader??by-ident!resource")

{
  test: /.../,
  loader: "...",
  options: {
    ident: "by-ident",
    magic: () => return Math.random()
  }
}

loaderstyle-loaderloader

// style-loader generated code (simplified)
var addStyle = require("./add-style");
var css = require("-!css-loader?{"modules":true}!postcss-loader??postcss-ident");

addStyle(css);

ident

webpack2es6 modulePromiseAPIV1webapck