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

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

To use components from bower you need to add two things to webpack: Let webpack look in the bower_components folder. Let webpack use the main field from the bower.json file. Configuration See configuration resolve.modulesDirectories and list of plugins ResolverPlugin. var path = require("path"); var webpack = require("webpack"); module.exports = { resolve: { root: [path.join(__dirname, "bower_components")] }, plugins: [ new webpack.ResolverPlugin( new w

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

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

Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup CommonJs require yes only wrapping in define yes yes commonjs-plugin CommonJs require.resolve yes no no no no CommonJs exports yes only wrapping in define yes yes commonjs-plugin AMD define yes yes deamdify yes no AMD require yes yes no yes no AMD require loads on demand yes with manual configuration no yes no ES2015 import/export no no no yes yes Generate a single bundle yes yes? yes yes yes

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

The resolving process is pretty simple. We distinguish three types of requests: absolute path: require("/home/me/file") require("C:\Home\me\file") relative path: require("../src/file") require("./file") module path: require("module") require("module/lib/file") Resolving an absolute path We first check if the path points to a directory. For a directory we need to find the main file in this directory. Therefore the main field in the package.json is joined to the path. If there is no package.

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