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

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

Using webpack with gulp is as easy as using the node.js API. var gulp = require("gulp"); var gutil = require("gulp-util"); var webpack = require("webpack"); var WebpackDevServer = require("webpack-dev-server"); Normal compilation gulp.task("webpack", function(callback) { // run webpack webpack({ // configuration }, function(err, stats) { if(err) throw new gutil.PluginError("webpack", err); gutil.log("[webpack]", stats.toString({ // output options

Installation $ npm install webpack -g The webpack command is now available globally. Pure CLI webpack <entry> <output> entry Pass a file or a request string. You can pass multiple entries (every entry is loaded on startup). If you pass a pair in the form <name>=<request> you can create an additional entry point. It will be mapped to the configuration option entry. output Pass a path to a file. It will be mapped to the configuration options output.path and output.filename

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

In some cases webpack cannot parse some file, because it has a unsupported module format or isn?t even in a module format. Therefore you have many options to convert the file into a module. Using loaders On this page all examples with loaders are inlined into require calls. This is just for demonstration. You may want to configure them in your webpack config instead. Read Using loaders for more details how to do this. Importing Useful when a file has dependencies that are not imported via requi

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

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

The short way var webpack = require("webpack"); // returns a Compiler instance webpack({ // configuration }, function(err, stats) { // ... }); The long way var webpack = require("webpack"); // returns a Compiler instance var compiler = webpack({ // configuration }); compiler.run(function(err, stats) { // ... }); // or compiler.watch({ // watch options: aggregateTimeout: 300, // wait so long for more changes poll: true // use polling instead of native watchers // p

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