


Detailed explanation of webpack installation, basic packaging usage and command parameters
The following editor will bring you an in-depth webpack tutorial series_detailed explanation of installation and basic packaging usage and command parameters. The editor thinks it’s pretty good, and now I want to give it to you and give it as a reference. Let’s follow the editor to take a look at
webpack. I think everyone should know or have heard that Webpack is a front-end tool that allows each module to be loaded, preprocessed, and then packaged. Many modern front-end development environments rely on webpack for construction. For example, Vue officially recommends using webpack. Without further ado, let’s get started.
The first step is to install webpack
Create a new folder webpack-> Then create a new demo under webpack-> Switch to the demo directory on the command line, use npm init --yes to initialize the package.json file of the project, and then execute npm install webpack -- save-dev
The second step is to install webpack globally (version 3.5.6): npm install webpack@3.5. 6 -g After the installation is complete, use webpack -v to check the version of webpack
##The third step is to create a new index.js file, enter a function, pop up some information, then call the function, and finally package it with webpack ( webpack index.js index.bundle.js ): package the index.js file into index .bundle.js
The fourth step: Create a new index.html file, and then introduce index.bundle.js to use this js file
The fifth step is to combine the two js Pack and merge the files together
In addition, create a new calc.js file under the current directory, and then use module.exports to export it
The sixth step, the use of loader
Create a new style.css file in the current directory, then use require to introduce it into the index.js file, and execute it once Packaging (webpack index.js index.bundle.js), an error will be reported at this time, and the error message will be displayed as (you need loader to process the css file).
Step 7, install and use loader
We need to install two loaders, css-loader, style-loader (Installation command: npm install css-loader style -loader --save-dev), then use require to load
## and perform packaging again (webpack index.js index.bundle.js), and then refresh the index.html file to see if the body { background: red } in the css file has taken effect (the background of the browser body turns red)?
webpack packaging, which can be followed by many parameters, such as:
--progress: Packaging progress
--display-modules: Packaged modules
--colors: Whether to display the package in color Prompt message
--display-reasons: Packaging reason
--watch: Automatically monitor file changes
Wait, there are many more, you can refer to the official website
There are also plug-ins, configurations and many other common knowledge in project development
The above is the detailed content of Detailed explanation of webpack installation, basic packaging usage and command parameters. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics











Classification and Usage Analysis of JSP Comments JSP comments are divided into two types: single-line comments: ending with, only a single line of code can be commented. Multi-line comments: starting with /* and ending with */, you can comment multiple lines of code. Single-line comment example Multi-line comment example/**This is a multi-line comment*Can comment on multiple lines of code*/Usage of JSP comments JSP comments can be used to comment JSP code to make it easier to read

Introduction to Python functions: Usage and examples of the isinstance function Python is a powerful programming language that provides many built-in functions to make programming more convenient and efficient. One of the very useful built-in functions is the isinstance() function. This article will introduce the usage and examples of the isinstance function and provide specific code examples. The isinstance() function is used to determine whether an object is an instance of a specified class or type. The syntax of this function is as follows

WPS is a commonly used office software suite, and the WPS table function is widely used for data processing and calculations. In the WPS table, there is a very useful function, the DATEDIF function, which is used to calculate the time difference between two dates. The DATEDIF function is the abbreviation of the English word DateDifference. Its syntax is as follows: DATEDIF(start_date,end_date,unit) where start_date represents the starting date.

Introduction to Python functions: usage and examples of the abs function 1. Introduction to the usage of the abs function In Python, the abs function is a built-in function used to calculate the absolute value of a given value. It can accept a numeric argument and return the absolute value of that number. The basic syntax of the abs function is as follows: abs(x) where x is the numerical parameter to calculate the absolute value, which can be an integer or a floating point number. 2. Examples of abs function Below we will show the usage of abs function through some specific examples: Example 1: Calculation

How to use the exit function in C language requires specific code examples. In C language, we often need to terminate the execution of the program early in the program, or exit the program under certain conditions. C language provides the exit() function to implement this function. This article will introduce the usage of exit() function and provide corresponding code examples. The exit() function is a standard library function in C language and is included in the header file. Its function is to terminate the execution of the program, and can take an integer

The ISNULL() function in MySQL is a function used to determine whether a specified expression or column is NULL. It returns a Boolean value, 1 if the expression is NULL, 0 otherwise. The ISNULL() function can be used in the SELECT statement or for conditional judgment in the WHERE clause. 1. The basic syntax of the ISNULL() function: ISNULL(expression) where expression is the expression to determine whether it is NULL or

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.

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
