Table of Contents
1. New features of Webpack 3
1.1 Update method and version migration
1.2 Scope Hoisting
1.3 Magic Comments
2. Next new features
3. Summary
Home Web Front-end JS Tutorial What are the new features of Webpack3?

What are the new features of Webpack3?

Jun 21, 2017 am 09:41 AM
web webpack characteristic

This article briefly shares the new features in the latest release of Webpack 3 for your reference.

1. New features of Webpack 3

On June 20, Webpack released the latest version 3.0 and announced it on Medium.

Webpack is now almost the standard for front-end development, so let’s take a look at the major feature updates in the new version.
There is not much change overall compared to 2.0, so don’t panic.
For related video tutorials on Webpack 2.0, you can refer to the 20 episodes of video tutorials I recorded, Webpack 2 Video Tutorials.
The following is the Features List in v3.0 Release.

  • node_modules no longer mangle to ~ in stats [breaking change]

  • timeout for HMR requests is configurable

  • added experimental Scope Hoisting (webpack.optimize.ModuleConcatenationPlugin)

  • some performance improvements

  • added output.libraryExport to select an export for the library

  • sourceMapFilename now supports [contenthash] [breaking change]

  • module.noParse supports functions

  • add node: false option to disable all node specific additions

1.1 Update method and version migration

You can install it directly through the command, you need to add it later version number.

npm install webpack@3.0.0 --save-dev
Copy after login

or

yarn add webpack@3.0.0 --dev
Copy after login

As for upgrading from Webpack 2 to Webpack 3, the official words are:

no effort beyond running the upgrade commands in your terminal

So it can be concluded that although the version number has changed significantly, there will not be much change, so you can breathe a sigh of relief.

1.2 Scope Hoisting

Each module before was included in an independent function closure. This processing method caused the problem of slow code execution in the browser.
After referring to frameworks such as Closure Compiler and RollupJS, the development team changed the wrapping method of function closures into a configurable form.
Just configure it in the previous plugins.

module.exports = {  
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
};
Copy after login

Of course, the configuration may not be successful due to the loading of some modules. The official CLI parameter --display-optimization-bailout is used to debug what caused the configuration failure.

1.3 Magic Comments

In fact, you can command chunk name.

import(/* webpackChunkName: "my-chunk-name" */ 'module');
Copy after login

For more usage, please refer here.

2. Next new features

  • Better compilation cache

  • Fast first and incremental compilation Speed

  • More friendly support for TypeScript

  • Modify Long term caching

  • Add support for WASM Module support

  • User experience improvement

3. Summary

Overall, there is not much change, and asMagic Comments and other functions have been released in the 2.4 version. Personally, I feel that releasing a 3.0 version is mainly a symbol of the team's determination to provide better products.

The above is the detailed content of What are the new features of Webpack3?. 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

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

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)

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

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

Is PHP front-end or back-end in web development? Is PHP front-end or back-end in web development? Mar 24, 2024 pm 02:18 PM

PHP belongs to the backend in web development. PHP is a server-side scripting language, mainly used to process server-side logic and generate dynamic web content. Compared with front-end technology, PHP is more used for back-end operations such as interacting with databases, processing user requests, and generating page content. Next, specific code examples will be used to illustrate the application of PHP in back-end development. First, let's look at a simple PHP code example for connecting to a database and querying data:

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.

Are there any class-like object-oriented features in Golang? Are there any class-like object-oriented features in Golang? Mar 19, 2024 pm 02:51 PM

There is no concept of a class in the traditional sense in Golang (Go language), but it provides a data type called a structure, through which object-oriented features similar to classes can be achieved. In this article, we'll explain how to use structures to implement object-oriented features and provide concrete code examples. Definition and use of structures First, let's take a look at the definition and use of structures. In Golang, structures can be defined through the type keyword and then used where needed. Structures can contain attributes

Golang's browser support: building an interactive web Golang's browser support: building an interactive web Apr 07, 2024 pm 04:03 PM

Go builds interactive web applications that run in the browser. Steps: Create Go project and main.go file, add HTTP handler to display messages. Add forms using HTML and JavaScript for user input and submission. Add handling of POST requests in your Go application, receive user messages and return responses. Use FetchAPI to send POST requests and handle server responses.

Choose the applicable Go version, based on needs and features Choose the applicable Go version, based on needs and features Jan 20, 2024 am 09:28 AM

With the rapid development of the Internet, programming languages ​​are constantly evolving and updating. Among them, Go language, as an open source programming language, has attracted much attention in recent years. The Go language is designed to be simple, efficient, safe, and easy to develop and deploy. It has the characteristics of high concurrency, fast compilation and memory safety, making it widely used in fields such as web development, cloud computing and big data. However, there are currently different versions of the Go language available. When choosing a suitable Go language version, we need to consider both requirements and features. head

How to implement h5 to slide up on the web side to load the next page How to implement h5 to slide up on the web side to load the next page Mar 11, 2024 am 10:26 AM

Implementation steps: 1. Monitor the scroll event of the page; 2. Determine whether the page has scrolled to the bottom; 3. Load the next page of data; 4. Update the page scroll position.

See all articles