DOCSEARCHbyAlgolia
Submit Docs

Webpack Documentation

website·Indexed 33 days ago

https://webpack.kr/

Comprehensive guides and concepts for the Webpack module bundler, covering installation, asset management, code splitting, and production optimization. Includes technical documentation on writing loaders and plugins, integrating TypeScript, implementing Hot Module Replacement (HMR), and managing dependency graphs.

Tokens
256.9K
Snippets
1.3K
Records
2K
Agent score
58%

What's inside Webpack

  1. Overview of Webpack customization interfaces

    Webpack provides several interfaces to customize the compilation process. While some functionality overlaps (e.g., configuration options can be set via both config files and CLI flags), certain options are only available through specific interfaces. The primary interfaces include the Command Line Interface (CLI), the Node API for programmatic control, Module system support, Loaders for source code transformation, and Plugins for accessing the compiler lifecycle hooks.

  2. Overview of webpack core concepts

    webpack is a static module bundler for modern JavaScript applications. It internally creates a dependency graph by mapping all required modules in a project to generate one or more bundles. Since version 4.0.0, a configuration file is not strictly required, but it is highly flexible for custom needs.

  3. Overview of Webpack 5 Asset Modules

    Asset Modules allow you to use assets (fonts, icons, etc.) without needing to configure additional loaders. They replace several common loaders used in Webpack 4 and earlier.

  4. Overview of SvgChunkWebpackPlugin

    SvgChunkWebpackPlugin creates optimized SVG sprites based on Webpack entrypoints. It ensures that each sprite contains only the SVG dependencies required by its specific entrypoint, enabling code splitting for SVG files. The plugin integrates SVGO to clean and optimize SVG source code (removing comments and conflicting CSS classes) before generating the sprite.

  5. Overview of ContextModuleFactory Hooks

    The ContextModuleFactory module is used by the Webpack compiler to create dependencies for the require.context API. It resolves requested directories, generates requests for files, and filters them using provided regular expressions. The ContextModuleFactory class extends Tapable, allowing developers to hook into its lifecycle using tap, tapAsync, or tapPromise depending on the hook type.
    ContextModuleFactory.hooks.someHook.tap(/* ... */);

  6. Overview of Webpack Module Federation

    Module Federation allows multiple independent builds to function as a single integrated application. Each build acts as a 'container' that can expose its own code and consume code from other containers at runtime. This architecture is commonly used for Micro-Frontends, allowing separate deployments for different pages or shared component libraries without requiring a full application rebuild.

  7. Overview of SvgChunkWebpackPlugin

    SvgChunkWebpackPlugin creates optimized SVG sprites based on Webpack entrypoints. It ensures that each sprite contains only the SVG dependencies required by its specific entrypoint, enabling code splitting for SVG files. The plugin integrates SVGO to clean and optimize SVG source code (removing comments and conflicting CSS classes) before generating the sprite.

  8. Overview of NormalModuleFactory Hooks

    The NormalModuleFactory class extends Tapable and provides hooks to intercept the module creation process, including dependency resolution, parsing, and generation. These hooks can be tapped directly via NormalModuleFactory.hooks or through the compiler.
    const nmf = NormalModuleFactory.hooks;
nmf.someHook.tap("MyPlugin", (resolveData) => {
  // ...
});

  9. Overview of HtmlMinimizerWebpackPlugin

    HtmlMinimizerWebpackPlugin is a third-party Webpack plugin used to optimize and minify HTML files to reduce bundle size and improve loading performance. It supports three different minification engines:

    1. html-minifier-terser: The default JavaScript-based minifier.
    2. swc: A high-performance Rust-based platform.
    3. @minify-html/node: A Rust-based minifier optimized for speed and effectiveness.

  10. Overview of ChunksWebpackPlugin

    ChunksWebpackPlugin is a third-party plugin for Webpack that solves the difficulty of identifying relations between auto-generated chunks (created by SplitChunksPlugin) and their corresponding entry points in multi-page applications. It parses webpack compilation entry points and generates HTML files containing all assets filtered by that entry point, as well as a chunks-manifest.json file.

  11. Overview of Webpack Loaders

    Loaders allow Webpack to apply transformations to the source code of modules. They act as pre-processors when files are imported or 'loaded', similar to tasks in other build tools. Common use cases include converting TypeScript to JavaScript, loading inline images as data URLs, or importing CSS files directly into JavaScript modules.

  12. Overview of available Webpack plugins

    Webpack provides a wide variety of plugin interfaces that allow for flexible customization of the build process. Common plugins include:

    • BannerPlugin: Adds a banner to the top of each generated chunk.
    • ChunksWebpackPlugin: Generates an HTML file containing the relationship between entry points and chunks.
    • CompressionWebpackPlugin: Prepares compressed versions of assets for Content-Encoding.
    • ContextReplacementPlugin: Overrides the context inferred from require expressions.
    • CopyWebpackPlugin: Copies individual files or entire directories to the build directory.
    • DefinePlugin: Allows the use of global constants set at compile time.
    • DllPlugin: Separates bundles to significantly reduce build time.
    • EnvironmentPlugin: A shorthand for using DefinePlugin to set keys in process.env.
    • EslintWebpackPlugin: Integrates ESLint into the Webpack build.
    • HotModuleReplacementPlugin: Enables Hot Module Replacement (HMR).
    • HtmlWebpackPlugin: Simplifies the creation of HTML files to serve bundles.
    • IgnorePlugin: Excludes specific modules from the bundle.
    • LimitChunkCountPlugin: Sets minimum/maximum limits on the number of chunks for better control.
    • MergeDuplicateChunksPlugin: Merges chunks that contain the same modules.
    • MinChunkSizePlugin: Maintains chunk sizes above a specified limit.
    • MiniCssExtractPlugin: Generates CSS files for each JS file that requires CSS.
    • NoEmitOnErrorsPlugin: Skips the emit stage when compilation errors occur.
    • NormalModuleReplacementPlugin: Replaces resources that match a regular expression.
    • ProgressPlugin: Reports compilation progress.
    • ProvidePlugin: Allows modules to be used without explicit import or require statements.
    • SourceMapDevToolPlugin: Provides fine-grained control over source maps.
    • EvalSourceMapDevToolPlugin: Provides fine-grained control over eval source maps.
    • SvgChunkWebpackPlugin: Generates SVGO-optimized SVG sprites based on entry point dependencies.
    • MinimizerPlugin: Minifies JS/CSS/HTML/JSON using Terser or other tools.