Usage Like browserify, webpack analyzes all the node-style require() calls in your app and builds a bundle that you can serve up to the browser using a <script> tag. Instead of doing $ browserify main.js > bundle.js do $ webpack main.js bundle.js webpack doesn?t write to stdout. You need to specify a filename. It can?t write to stdout because, unlike browserify, it may generate multiple output files. The best way to configure webpack is with a webpack.config.js file. It?s loaded from c

What are loaders? Loaders are transformations that are applied on a resource file of your app. They are functions (running in node.js) that take the source of a resource file as the parameter and return the new source. For example, you can use loaders to tell webpack to load CoffeeScript or JSX. Loader features Loaders can be chained. They are applied in a pipeline to the resource. The final loader is expected to return JavaScript, the others can return arbitrary format (which is passed to the

For big web apps it?s not efficient to put all code into a single file, especially if some blocks of code are only required under some circumstances. Webpack has a feature to split your codebase into ?chunks? which are loaded on demand. Some other bundlers call them ?layers?, ?rollups?, or ?fragments?. This feature is called ?code splitting?. It?s an opt-in feature. You can define split points in your code base. Webpack takes care of the dependencies, output files and runtime stuff. To clarify

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

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

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

dynamic requires A context is created if your request contains expressions, so the exact module is not known on compile time. Example: require("./template/" + name + ".jade"); webpack parses the require statement and extracts some information: Directory: ./template Regular expression: /^.*\.jade$/ context module A context module is generated. It contains references to all modules in that directory that can be required with a request matching the regular expression. The context module contai

Minimize To minimize your scripts (and your css, if you use the css-loader) webpack supports a simple option: --optimize-minimize resp. new webpack.optimize.UglifyJsPlugin() That?s a simple but effective way to optimize your web app. As you already know (if you?ve read the remaining docs) webpack gives your modules and chunks ids to identify them. Webpack can vary the distribution of the ids to get the smallest id length for often used ids with a simple option: --optimize-occurence-order resp.

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

There is a grunt plugin for using webpack and the webpack-dev-server: grunt-webpack. It?s pretty simple to use: module.exports = function(grunt) { grunt.loadNpmTasks("grunt-webpack"); grunt.initConfig({ webpack: { options: { // configuration for all builds }, build: { // configuration for this build } }, "webpack-dev-server": { options: { webpack: {