extension semantic loader examples .js returns module exports nothing .ts returns module exports ts-loader .coffee returns module exports coffee-loadercoffee-redux-loader .jsx returns module exports (react component) jsx-loaderreact-hot-loader!jsx-loader .json.json5 returns json value json-loaderjson5-loader .txt return string value raw-loader .css returns nothing, side effect of adding style to DOM style-loader!css-loaderstyle-loader!css-loader!autoprefixer-loader .less returns nothi

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

webpack is fed a configuration object. Depending on your usage of webpack there are two ways to pass this configuration object: CLI If you use the CLI it will read a file webpack.config.js (or the file passed by the --config option). This file should export the configuration object: module.exports = { // configuration }; node.js API If you use the node.js API you need to pass the configuration object as parameter: webpack({ // configuration }, callback); multiple configurations In both

?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

embedded stylesheets Through using the style-loader and the css-loader it?s possible to embed stylesheets into a webpack javascript bundle. This way you can modularize your stylesheets with your other modules. This way stylesheets are as easy as require("./stylesheet.css"). installation Install the loaders from npm. npm install style-loader css-loader --save-dev configuration Here is a configuration example that enables require() css: { // ... module: { loaders: [ {

For a high-level introduction to writing plugins, start with How to write a plugin. Many objects in Webpack extend the Tapable class, which exposes a plugin method. And with the plugin method, plugins can inject custom build steps. You will see compiler.plugin and compilation.plugin used a lot. Essentially, each one of these plugin calls binds a callback to fire at specific steps throughout the build process. A plugin is installed once as Webpack starts up. Webpack installs a plugin by calling

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

A quick summary of all methods and variables available in code compiled with webpack. Basic require CommonJs require(dependency: String) Returns the exports from a dependency. The call is sync. No request to the server is fired. The compiler ensures that the dependency is available. Style: CommonJs Example: var $ = require("jquery"); var myModule = require("my-module"); define (with factory) define([name: String], [dependencies: String[]], factoryMethod: function(...)) The name argument is ig

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

WIP see CLI for the command line interface. see node.js API for the node.js interface. see Configuration for the configuration options.