The CommonJS group defined a module format to solve JavaScript scope issues by making sure each module is executed in its own namespace. This is achieved by forcing modules to explicitly export those variables it wants to expose to the ?universe?, and also by defining those other modules required to properly work. To achieve this CommonJS give you two tools: the require() function, which allows to import a given module into the current scope. the module object, which allows to export something

Introduction Loaders allow you to preprocess files as you require() or ?load? them. Loaders are kind of like ?tasks? are in other build tools, and provide a powerful way to handle frontend build steps. Loaders can transform files from a different language like, CoffeeScript to JavaScript, or inline images as data URLs. Loaders even allow you to do things like require() css files right in your JavaScript! To tell Webpack to transform a module with a loader, you can specify the loader in the modu

Prerequirement: Code Splitting If you need multiple bundles for multiple HTML pages you can use the ?multiple entry points? feature. It will build multiple bundles at once. Additional chunks can be shared between these entry chunks and modules are only built once. Hint: When you want to start an entry chunk from a module, you are doing something wrong. Use Code Splitting instead! Every entry chunk contains the webpack runtime, so you can only load one entry chunk per page. (Hint: To bypass this

Incremental builds Make sure you don?t do a full rebuild. webpack has a great caching layer that allows to keep already compiled modules in memory. There are some tools that help to use it: webpack-dev-server: Serves all webpack assets from memory. Best performance. webpack-dev-middleware: The same as middleware for advanced users. webpack ?watch or watch: true: Caches stuff but write assets to disk. Ok performance. Exclude modules from parsing With noParse you can exclude big libraries fr

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],

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

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: [ {

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