Home Web Front-end JS Tutorial Detailed explanation of core concepts of Webpack framework

Detailed explanation of core concepts of Webpack framework

Dec 23, 2017 pm 03:16 PM
web webpack concept

Webpack is a front-end packaging tool (not a library or framework). It can use various resources, such as JS (including JSX), coffee, css (including less/sass), images, etc. as modules. Handling and use. This article mainly introduces the core concepts of the Webpack framework (compilation of knowledge points). Friends in need can refer to it. I hope it can help everyone.

1. Basic knowledge points

 1.1 webpack is a module packager for modern JavaScript applications (module bundler). When webpack processes an application, it recursively builds a dependency graph that contains every module the application needs, and then packages all these modules into one or more bundles.

1.2 The four core concepts of webpack:

1.2.1 entry: entry point, entry starting point (there can be multiple), webpack will start from this starting point to find out which The file is what the entry file depends on, so as to build an internal dependency graph and process it and output it to a file called bundles

 1.2.2 output (output): Specify the bundle file processed by the entry point The output path (path) and name (filename) of Packaging and other processing; webpack loader essentially converts all types of files into modules that can be directly referenced by the application's dependency graph. It has two goals:

   1.2.3.1 Use the test attribute to identify the corresponding Convertible files for loader

  1.2.3.2 Use the use attribute to convert these files so that they are added to the dependency graph and eventually added to the bundle

  If you want to use webpack When defining loader in the configuration, it must be defined in module.rules instead of rules

 1.2.4 plugins: from packaging optimization and compression to redefining variables in the environment. The plug-in interface is extremely powerful and can handle a variety of tasks

  To use a plug-in, you only need to require() it and then add it to the plugins array. Most plugins can be customized through options. You can also use the same plug-in multiple times for different purposes in a configuration file. In this case, you need to create an instance of it by using the new operator.

    Webpack provides many plugins available out of the box! Check the plug-in list for more information. For more detailed pictures and texts, please refer to the official documentation https://doc.webpack-china.org/concepts/.

Related recommendations:


Detailed explanation of webpack+express multi-page site development examples

Electron tutorial for building React and Webpack desktop applications

Webpack learning tutorial front-end performance optimization summary

The above is the detailed content of Detailed explanation of core concepts of Webpack framework. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What does the metaverse concept mean? What is the metaverse concept? What does the metaverse concept mean? What is the metaverse concept? Feb 22, 2024 pm 03:55 PM

The Metaverse is an illusory world that uses technology to map and interact with the real world. Analysis 1 Metaverse [Metaverse] is an illusory world that makes full use of technological methods to link and create, and maps and interacts with the real world. It is a data living space with the latest social development system. The 2-dimensional universe is essentially a virtual technology and digital process of the real world, which requires a lot of transformation of content production, economic system, customer experience and physical world content. 3 However, the development trend of the metaverse is gradual. It is finally formed by the continuous combination and evolution of many tools and platforms with the support of shared infrastructure, standards and protocols. Supplement: What is the metaverse composed of? 1 The metaverse is composed of Meta and Verse, Meta is transcendence, and V

How to implement form validation for web applications using Golang How to implement form validation for web applications using Golang Jun 24, 2023 am 09:08 AM

Form validation is a very important link in web application development. It can check the validity of the data before submitting the form data to avoid security vulnerabilities and data errors in the application. Form validation for web applications can be easily implemented using Golang. This article will introduce how to use Golang to implement form validation for web applications. 1. Basic elements of form validation Before introducing how to implement form validation, we need to know what the basic elements of form validation are. Form elements: form elements are

Learn more about Gunicorn's fundamentals and features Learn more about Gunicorn's fundamentals and features Jan 03, 2024 am 08:41 AM

Basic concepts and functions of Gunicorn Gunicorn is a tool for running WSGI servers in Python web applications. WSGI (Web Server Gateway Interface) is a specification defined by the Python language and is used to define the communication interface between web servers and web applications. Gunicorn enables Python web applications to be deployed and run in production environments by implementing the WSGI specification. The function of Gunicorn is to

Master the key concepts of Spring MVC: Understand these important features Master the key concepts of Spring MVC: Understand these important features Dec 29, 2023 am 09:14 AM

Understand the key features of SpringMVC: To master these important concepts, specific code examples are required. SpringMVC is a Java-based web application development framework that helps developers build flexible and scalable structures through the Model-View-Controller (MVC) architectural pattern. web application. Understanding and mastering the key features of SpringMVC will enable us to develop and manage our web applications more efficiently. This article will introduce some important concepts of SpringMVC

Introduction and core concepts of Oracle RAC Introduction and core concepts of Oracle RAC Mar 07, 2024 am 11:39 AM

Introduction and core concepts of OracleRAC (RealApplicationClusters) As the amount of enterprise data continues to grow and the demand for high availability and high performance becomes increasingly prominent, database cluster technology becomes more and more important. OracleRAC (RealApplicationClusters) is designed to solve this problem. OracleRAC is a high-availability, high-performance cluster database solution launched by Oracle.

What are web standards? What are web standards? Oct 18, 2023 pm 05:24 PM

Web standards are a set of specifications and guidelines developed by W3C and other related organizations. It includes standardization of HTML, CSS, JavaScript, DOM, Web accessibility and performance optimization. By following these standards, the compatibility of pages can be improved. , accessibility, maintainability and performance. The goal of web standards is to enable web content to be displayed and interacted consistently on different platforms, browsers and devices, providing better user experience and development efficiency.

How to enable administrative access from the cockpit web UI How to enable administrative access from the cockpit web UI Mar 20, 2024 pm 06:56 PM

Cockpit is a web-based graphical interface for Linux servers. It is mainly intended to make managing Linux servers easier for new/expert users. In this article, we will discuss Cockpit access modes and how to switch administrative access to Cockpit from CockpitWebUI. Content Topics: Cockpit Entry Modes Finding the Current Cockpit Access Mode Enable Administrative Access for Cockpit from CockpitWebUI Disabling Administrative Access for Cockpit from CockpitWebUI Conclusion Cockpit Entry Modes The cockpit has two access modes: Restricted Access: This is the default for the cockpit access mode. In this access mode you cannot access the web user from the cockpit

Write a Java program to calculate the area and perimeter of a rectangle using the concept of classes Write a Java program to calculate the area and perimeter of a rectangle using the concept of classes Sep 03, 2023 am 11:37 AM

The Java language is one of the most commonly used object-oriented programming languages ​​in the world today. The concept of classes is one of the most important features of object-oriented languages. A class is like a blueprint for an object. For example, when we want to build a house, we first create a blueprint of the house, in other words, we create a plan that shows how we are going to build the house. According to this plan we can build many houses. Likewise, using classes, we can create many objects. Classes are blueprints for creating many objects, where objects are real-world entities like cars, bikes, pens, etc. A class has the characteristics of all objects, and the objects have the values ​​of these characteristics. In this article, we will write a Java program to find the perimeter and faces of a rectangle using the concept of classes

See all articles