Home Web Front-end JS Tutorial Detailed explanation of webpack configuration file

Detailed explanation of webpack configuration file

Aug 22, 2017 pm 05:06 PM
web webpack Configuration file

This article mainly introduces the entry and output of webpack configuration files. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look.

This article introduces the webpack configuration file entry and output, and shares it with everyone. The details are as follows:

In webpack.config.js, entry is the only entry file

entry can also be an array

If it is an array, the files in the array will be packed together into bundle.js

entry can also be an object.

If filename in the output has three values:

.[name] is the key value of the file name as entry.

.[hash] is the md5 encrypted value.

.[chunkhash] is used here as the version number.

Every time a file is modified and run, a different hash and chunkhash value will be generated to facilitate version management of static resources when going online.

If the file name changes every time it is run, the name of the file introduction also needs to change. Use the install html-webpack-plugin plug-in to install npm install html-webpack-plugin --save-dev

After completion, add the plugins key in the webpack.config.js file:

The value of plugins is an array, inside The values ​​are all new htmlWebpackPlugin(), and the parameter is a configuration array, as follows:

  • title: used to generate the title element of the page

  • filename: The output HTML file name is index.html by default, and can also be directly configured with subdirectories.

  • template: Template file path, supports loader, such as html!./index.html

  • inject: true | 'head' | 'body' | false , inject all resources into a specific template or templateContent. If set to true or body, all javascript resources will be placed at the bottom of the body element, and 'head' will be placed in the head element.

  • favicon: Add specific favicon path to the output HTML file.

  • minify: {} | false, pass html-minifier option to minify output

  • hash: true | false, if true, will Adds a unique webpack build hash to all included scripts and CSS files, useful for uncaching.

  • cache: true | false, if true, this is the default value and the file will only be published after the file is modified.

  • showErrors: true | false, if true, this is the default value and the error message will be written to the HTML page

  • chunks: Allows adding only certain chunks (for example, only unit test chunks)

  • chunksSortMode: Allows to control how chunks are sorted before being added to the page, supported values: 'none' | 'default ' | {function}-default:'auto'

  • ##excludeChunks: Allows skipping certain chunks (for example, skipping unit test chunks)


Final generation

##

The above is the detailed content of Detailed explanation of webpack configuration file. 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)

How to enable or disable eSIM on Windows 11 How to enable or disable eSIM on Windows 11 Sep 20, 2023 pm 05:17 PM

If you bought your laptop from a mobile operator, you most likely had the option to activate an eSIM and use your cellular network to connect your computer to the Internet. With eSIM, you don't need to insert another physical SIM card into your laptop because it's already built-in. It is very useful when your device cannot connect to the network. How to check if my Windows 11 device is eSIM compatible? Click the Start button and go to Network & Internet > Cellular > Settings. If you don't see the "Cellular" option, your device doesn't have eSIM capabilities and you should check another option, such as using your mobile device to connect your laptop to a hotspot. In order to activate and

How to change network type to private or public in Windows 11 How to change network type to private or public in Windows 11 Aug 24, 2023 pm 12:37 PM

Setting up a wireless network is common, but choosing or changing the network type can be confusing, especially if you don't know the consequences. If you're looking for advice on how to change the network type from public to private or vice versa in Windows 11, read on for some helpful information. What are the different network profiles in Windows 11? Windows 11 comes with a number of network profiles, which are essentially sets of settings that can be used to configure various network connections. This is useful if you have multiple connections at home or office so you don't have to set it all up every time you connect to a new network. Private and public network profiles are two common types in Windows 11, but generally

Where is the win10 user profile? How to set the user profile in Win10 Where is the win10 user profile? How to set the user profile in Win10 Jun 25, 2024 pm 05:55 PM

Recently, many Win10 system users want to change the user profile, but they don’t know how to do it. This article will show you how to set the user profile in Win10 system! How to set up user profile in Win10 1. First, press the "Win+I" keys to open the settings interface, and click to enter the "System" settings. 2. Then, in the opened interface, click "About" on the left, then find and click "Advanced System Settings". 3. Then, in the pop-up window, switch to the "" option bar and click "User Configuration" below.

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

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

Install Helm on Ubuntu Install Helm on Ubuntu Mar 20, 2024 pm 06:41 PM

Helm is an important component of Kubernetes that simplifies the deployment of Kubernetes applications by bundling configuration files into a package called HelmChart. This approach makes updating a single configuration file more convenient than modifying multiple files. With Helm, users can easily deploy Kubernetes applications, simplifying the entire deployment process and improving efficiency. In this guide, I'll cover different ways to implement Helm on Ubuntu. Please note: The commands in the following guide apply to Ubuntu 22.04 as well as all Ubuntu versions and Debian-based distributions. These commands are tested and should work correctly on your system. in U

Effective method to solve the problem of garbled characters in the eclipse editor Effective method to solve the problem of garbled characters in the eclipse editor Jan 04, 2024 pm 06:56 PM

An effective method to solve the garbled problem of eclipse requires specific code examples. In recent years, with the rapid development of software development, eclipse, as one of the most popular integrated development environments, has provided convenience and efficiency to many developers. However, you may encounter garbled code problems when using eclipse, which brings trouble to project development and code reading. This article will introduce some effective methods to solve the problem of garbled characters in Eclipse and provide specific code examples. Modify eclipse file encoding settings: in eclip

See all articles