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.

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

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

Today?s websites are evolving into web apps: More and more JavaScript is in a page. You can do more stuff in modern browsers. Fewer full page reloads ? even more code in a page. As a result there is a lot of code on the client side! A big code base needs to be organized. Module systems offer the option to split your code base into modules. Module system styles There are multiple standards for how to define dependencies and export values: <script>-tag style (without a module system) Com

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

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.

Prerequirement: Code Splitting If you need multiple bundles for multiple HTML pages you can use the ?multiple entry points? feature. It will build multiple bundles at once. Additional chunks can be shared between these entry chunks and modules are only built once. Hint: When you want to start an entry chunk from a module, you are doing something wrong. Use Code Splitting instead! Every entry chunk contains the webpack runtime, so you can only load one entry chunk per page. (Hint: To bypass this

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

To effectively cache your files, they should have a hash or version in their URL. You can emit or move the output files manually in a folder called v1.3. But this has several disadvantages: Extra work for the developer and unchanged files aren?t loaded from cache. Webpack can add hashes for the files to the filename. Loaders that emit files (worker-loader, file-loader) already do this. For the chunks you have to enable it. There are two levels: Compute a hash of all chunks and add it. Compute a

Introduction Loaders allow you to preprocess files as you require() or ?load? them. Loaders are kind of like ?tasks? are in other build tools, and provide a powerful way to handle frontend build steps. Loaders can transform files from a different language like, CoffeeScript to JavaScript, or inline images as data URLs. Loaders even allow you to do things like require() css files right in your JavaScript! To tell Webpack to transform a module with a loader, you can specify the loader in the modu