Scribd Logo
Upload

Welcome to Scribd!

  • Web Pack

    Uploaded by

    PhucS
    7 views2 pages
    Webpack is a module bundler that takes modules with dependencies and generates static assets representing those modules. It builds a dependency graph of an application and bundles all modules into one or more bundles. Some key features of Webpack include assets modules and loaders. Assets modules allow using asset files like images without additional dependencies. There are four types: asset/resource generates separate files, asset/inline embeds assets directly in bundles under 8kb, asset uses inline or resource, and asset/source reads files as strings. Loaders allow importing non-JavaScript files by configuring rules to teach Webpack how to handle them, like using style and css loaders to handle CSS files.

    Original Description:

    About Webpack

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Webpack is a module bundler that takes modules with dependencies and generates static assets representing those modules. It builds a dependency graph of an application and bundles all modules into one or more bundles. Some key features of Webpack include assets modules and loaders. Assets modules allow using asset files like images without additional dependencies. There are four types: asset/resource generates separate files, asset/inline embeds assets directly in bundles under 8kb, asset uses inline or resource, and asset/source reads files as strings. Loaders allow importing non-JavaScript files by configuring rules to teach Webpack how to handle them, like using style and css loaders to handle CSS files.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    7 views2 pages

    Web Pack

    Uploaded by

    PhucS
    Webpack is a module bundler that takes modules with dependencies and generates static assets representing those modules. It builds a dependency graph of an application and bundles all modules into one or more bundles. Some key features of Webpack include assets modules and loaders. Assets modules allow using asset files like images without additional dependencies. There are four types: asset/resource generates separate files, asset/inline embeds assets directly in bundles under 8kb, asset uses inline or resource, and asset/source reads files as strings. Loaders allow importing non-JavaScript files by configuring rules to teach Webpack how to handle them, like using style and css loaders to handle CSS files.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    1. Why need webpack?

    Webpack is a static module bundler for modern JavaScript applications.


    By homepage webpack:
    When Webpack processes your application, it recursively builds a
    dependency graph that includes every module in your application and then packages
    all of those modules into one or more bundles.
    TO interview:
    Webpack is a module bundler for JavaScript. It takes modules with
    dependencies and generates static assets that represent those modules.
    It's a powerful tool to manage JavaScript dependencies

    2. Features of WWebpack
    + Assets module:
    * is a new feature introduced in Webpack five.
    * It allows you to easily use asset files in your JavaScript
    application without installing additional dependencies (such as image, fonts, etc.)
    * Have 4 types of assets module:
    - asset/resource
    - asset/inline
    - asset => combine two assets above, if file < 8kb then use
    asset/inline else use asset/inline
    - asset/source
    + Asset/resource:
    * To handle images with webpack, need add rules in module in
    webpack config file, if dont have it, webpack dont know how to handle image
    * Public Path tell webpack which URL to use in order to load all
    the generated files in the browser

    + Asset/inline:
    * dont generate new files in the output directory, instead it
    will generate base 64 a representation of your file and bake it directly into the
    JS bundle
    * some time Asset/inline is better than Asset/resource, when use
    Asset/resource, webpack generates a separate file for every image, this make
    browser make a separate HTTP request for each image it need to display. If u have
    20 image so browser need to make 20 HTTP requests to display those images

    + Asset:
    * combine two assets above, if file < 8kb then use asset/inline
    else use asset/inline
    * we can change file size 8kb to any number we want by use parser
    in rule

    + Asset/source:
    * dont generate new files in the output directory, similiar
    asset/inline but no modify file
    * read the contents of the file into a JS string and injects that
    string directly into the JS bundle as is without any modifications similiar to
    asset/inline

    + Loaders:
    * It's allows to import all other kinds of files that you can not
    handle by using Asset Modules (ex css files)
    * To teach webpack handle with css file, we need to configure in rules,
    different type modules asset, with css we use "use" property call "style-loader",
    "css-loader"
    / Css loader read the contents of the css file and returns this
    content but it doesn't do anything
    / Then style loader takes the Css and injects it into the page
    using style tag

    You might also like