20
Webpack Overview
An entry point indicates which module webpack should use to begin building out its internal dependency graph.
The output property tells webpack where to emit the bundles it creates and how to name these files. It defaults to
./dist/main.js for the main output file and to the ./dist folder for any other generated file.Chunks come in two forms:
Compilation process:
Compiler
graph LR
A[Compiler]-->B[Compilation]
B-->C[Modules]
C--Loaders-->D[Parser]
D-->E[Output]Compiler is a singleton. It controls the whole bundling process.
acorn library generates the AST tree for analyzing the relations of modules.IIFE function.The Compiler module is the main engine that creates a compilation instance with all the options passed through the CLI or Node API. It is the context containing all information for bundling. Every hot reload and compiling,
compiler creates a new compilation object. It extends the Tapable class in order to register and call plugins. Most user facing plugins are first registered on the Compiler.compiler.hooks.someHook.tap('MyPlugin', (params) => {
/* ... */
});
The Compilation object has many methods and hooks available. On this page, we will list the available methods and properties.
The Compilation module is used by the Compiler to create new compilations (or builds). A compilation instance has access to all modules and their dependencies (most of which are circular references). It is the literal compilation of all the modules in the dependency graph of an application. During the compilation phase, modules are loaded, sealed, optimized, chunked, hashed and restored.
compilation.hooks.buildModule.tap(
'SourceMapDevToolModuleOptionsPlugin',
(module) => {
module.useSourceMap = true;
}
);If Hot Module Replacement has been enabled via the HotModuleReplacementPlugin, its interface will be exposed under the module.hot property.
if (module.hot) {
module.hot.accept('./library.js', function () {
// Do something with the updated library module...
});
}graph LR
check-->ready
ready-->apply
apply-->dispose
dispose-->apply
apply-->idleLoaders allow webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph.
/*
@param {string|Buffer} content Content of the resource file
@param {object} [map] SourceMap data consumable by https://github.com/mozilla/source-map
@param {any} [meta] Meta data, could be anything
*/
module.exports = function webpackLoader(content, map, meta) {
// code of your webpack loader
}module.exports = function webpackLoader(content, map, meta) {
var callback = this.async();
someAsyncOperation(content, function (err, result) {
if (err) return callback(err);
callback(null, result, map, meta);
})
})A plugin for webpack consists of:
A named JavaScript function or a JavaScript class.
Defines apply method in its prototype.
Specifies an event hook to tap into.
Manipulates webpack internal instance specific data.
Invokes webpack provided callback after functionality is complete.
Defines apply method in its prototype.
Specifies an event hook to tap into.
Manipulates webpack internal instance specific data.
Invokes webpack provided callback after functionality is complete.
// A JavaScript class.
class MyExampleWebpackPlugin {
// Define `apply` as its prototype method which is supplied with compiler as its argument
apply(compiler) {
// Specify the event hook to attach to
compiler.hooks.emit.tapAsync(
'MyExampleWebpackPlugin',
(compilation, callback) => {
console.log('This is an example plugin!');
console.log(
'Here’s the `compilation` object which represents a single build of assets:',
compilation
);
// Manipulate the build using the plugin API provided by webpack
compilation.addModule(/* ... */);
callback();
}
);
}
}