config NormalModuleReplacementPlugin new webpack.NormalModuleReplacementPlugin(resourceRegExp, newResource) Replace resources that matches resourceRegExp with newResource. If newResource is relative, it is resolve relative to the previous resource. If newResource is a function, it is expected to overwrite the ?request? attribute of the supplied object. ContextReplacementPlugin new webpack.ContextReplacementPlugin( resourceRegExp, [newContentResource],

basic json: Loads file as JSON hson: Loads HanSON file (JSON for Humans) as JSON object raw: Loads raw content of a file (as utf-8) val: Executes code as module and consider exports as JavaScript code to-string: Executes code as a module, casts output to a string and exports it imports: Imports stuff to the module exports: Exports stuff from the module expose: Expose exports from a module to the global context script: Executes a JavaScript file once in global context (like in script ta

Notes: Not every hint apply to all apps. Some hints have positive and negative effects so it depends on your needs. Hints are ordered by importance (most important comes first), but importance heavily depends on the app. Hints are categorized by App, Developer and/or Build performance. Sometimes multiple categories apply. App performance: Your app perform better. This affects the user of your app and/or the cost of serving the app to the user. Developer performance: This makes it easier for yo

You developed a library and want to distribute it in compiled/bundled versions (in addition to the modularized version). You want to allow the user to use it in a <script>-tag or with a amd loader (i. e. require.js). Or you depend on various precompilations and want to take the pain for the user and distribute it as simple compiled commonjs module. configuration options webpack has three configuration options that are relevant for these use cases: output.library, output.libraryTarget and

https://github.com/webpack/karma-webpack

node.js Install node.js. node.js comes with a package manager called npm. webpack webpack can be installed through npm: $ npm install webpack -g webpack is now installed globally and the webpack command is available. Use webpack in a project It?s the best to have webpack also as dependency in your project. Through this you can choose a local webpack version and will not be forced to use the single global one. Add a package.json configuration file for npm with: $ npm init The answers to the ques

Plugins expose the full potential of the Webpack engine to third-party developers. Using staged build callbacks, developers can introduce their own behaviors into the Webpack build process. Building plugins is a bit more advanced than building loaders, because you?ll need to understand some of the Webpack low-level internals to hook into them. Be prepared to read some source code! Compiler and Compilation Among the two most important resources while developing plugins are the compiler and compi

A loader is a node module exporting a function. This function is called when a resource should be transformed by this loader. In the simple case, when only a single loader is applied to the resource, the loader is called with one parameter: the content of the resource file as string. The loader can access the loader API on the this context in the function. A sync loader that only wants to give a one value can simply return it. In every other case the loader can give back any number of values wi

Note that Hot Module Replacement (HMR) is still an experimental feature. Introduction Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running without a page reload. Prerequirements Using Plugins: http://webpack.github.io/docs/using-plugins.html Code Splitting: http://webpack.github.io/docs/code-splitting.html webpack-dev-server: http://webpack.github.io/docs/webpack-dev-server.html How does it work? Webpacks adds a small HMR runtime to the bundle du

?Hot Module Replacement? (HMR) is a feature to inject updated modules into the active runtime. It?s like LiveReload for every module. HMR is ?opt-in?, so you need to put some code at chosen points of your application. The dependencies are handled by the module system. I. e. you place your hot replacement code in module A. Module A requires module B and B requires C. If module C is updated, and module B cannot handle the update, modules B and C become outdated. Module A can handle the update and