To effectively cache your files, they should have a hash or version in their URL. You can emit or move the output files manually in a folder called v1.3. But this has several disadvantages: Extra work for the developer and unchanged files aren?t loaded from cache. Webpack can add hashes for the files to the filename. Loaders that emit files (worker-loader, file-loader) already do this. For the chunks you have to enable it. There are two levels: Compute a hash of all chunks and add it. Compute a

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

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

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

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

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

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

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

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

WIP devtool configuration option webpack-dev-server webpack-dev-middleware koa-webpack-dev: serve bundle + Hot Module Replacement in Koa.js development server