Home Web Front-end JS Tutorial Detailed explanation of webpack installation, basic packaging usage and command parameters

Detailed explanation of webpack installation, basic packaging usage and command parameters

Sep 11, 2017 am 10:02 AM
web webpack usage

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 index.bundle.js file will be generated in the current directory.

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

Then use var oCalc = require( './calc.js' ) to introduce calc.js in the index.js file, and then call the function oCalc.add( 10, 20 ), then now With two functions in index.js, execute the command

webpack index.js index.bundle.js again. After merging and packaging, refresh index.html again. Does the result of the add function pop up? Woolen cloth?

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)?

Step 8, more detailed packaging information

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!

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)

Hot Topics

Java Tutorial
1657
14
PHP Tutorial
1257
29
C# Tutorial
1229
24
Analyze the usage and classification of JSP comments Analyze the usage and classification of JSP comments Feb 01, 2024 am 08:01 AM

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 isinstance function Introduction to Python functions: Usage and examples of isinstance function Nov 04, 2023 pm 03:15 PM

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

Usage of WPSdatedif function Usage of WPSdatedif function Feb 20, 2024 pm 10:27 PM

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 abs function Introduction to Python functions: Usage and examples of abs function Nov 03, 2023 pm 12:05 PM

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 correctly use the exit function in C language How to correctly use the exit function in C language Feb 18, 2024 pm 03:40 PM

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

Detailed explanation and usage introduction of MySQL ISNULL function Detailed explanation and usage introduction of MySQL ISNULL function Mar 01, 2024 pm 05:24 PM

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

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

See all articles