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

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

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

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

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

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

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

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