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

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

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

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

basic json: Loads file as JSON hson: Loads HanSON file (JSON for Humans) as JSON object raw: Loads raw content of a file (as utf-8) val: Executes code as module and consider exports as JavaScript code to-string: Executes code as a module, casts output to a string and exports it imports: Imports stuff to the module exports: Exports stuff from the module expose: Expose exports from a module to the global context script: Executes a JavaScript file once in global context (like in script ta

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

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

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

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.