webpack is a module bundler. webpack takes modules with dependencies and generates static assets representing those modules. Why another module bundler? Existing module bundlers are not well suited for big projects (big single page applications). The most pressing reason for developing another module bundler was Code Splitting and that static assets should fit seamlessly together through modularization. I tried to extend existing module bundlers, but it wasn?t possible to achieve all goals. Go

The webpack-dev-server is a little node.js Express server, which uses the webpack-dev-middleware to serve a webpack bundle. It also has a little runtime which is connected to the server via Socket.IO. The server emits information about the compilation state to the client, which reacts to those events. You can choose between different modes, depending on your needs. So lets say you have the following config file: var path = require("path"); module.exports = { entry: { app: ["./app/main.js"

Note: The webpack-dev-middleware is for advanced users. See webpack-dev-server for a ready-to-use solution. The webpack-dev-middleware is a small middleware for a connect-based middleware stack. It uses webpack to compile assets in-memory and serve them. When a compilation is running every request to the served webpack assets is blocked until we have a stable bundle. You can use it in two modes: watch mode (default): The compiler recompiles on file change. lazy mode: The compiler compiles on ev

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

Built-in plugins Plugins are included in your module by using the plugins property in the webpack config. // webpack should be in the node_modules directory, install if not. var webpack = require("webpack"); module.exports = { plugins: [ new webpack.ResolverPlugin([ new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"]) ], ["normal", "loader"]) ] }; Other plugins Plugins that are not built-in may be installed via npm if published t

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

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

resolving general resolving issues --display-error-details give you more details. Read Configuration regarding resolving starting at resolveloaders have their own resolving configuration resolveLoader npm linked modules doesn?t find their dependencies The node.js module resolving algorithm is pretty simple: module dependencies are looked up in node_modules folders in every parent directory of the requiring module. When you npm link modules with peer dependencies that are not in your root d

There are two ways to test web applications: In-browsers: You get a more realistic test, but you need some more complex infrastructure and the test usually take longer. You can test DOM access. with node.js: You cannot test DOM access, but testing is usually faster. In-browser testing mocha-loader The mocha-loader executes your code with the mocha framework. If you run the code it?ll show the results in the web page. Hint: when using ! in the bash command line, you must escape it by prependin

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