찾다
웹 프론트엔드JS 튜토리얼Webpack3의 새로운 기능은 무엇입니까?
Webpack3의 새로운 기능은 무엇입니까?Jun 21, 2017 am 09:41 AM
webwebpack특성

이 기사에서는 참고할 수 있도록 최신 Webpack 3 릴리스의 새로운 기능을 간략하게 공유합니다.

1. Webpack 3의 새로운 기능

6월 20일 Webpack은 최신 버전 3.0을 출시하고 Medium에 발표했습니다.

Webpack은 이제 거의 프론트엔드 개발의 표준이 되었는데, 새 버전의 주요 기능 업데이트를 살펴보겠습니다.
2.0에 비해 전체적인 변화는 크지 않으니 당황하지 마세요.
Webpack 2.0 관련 영상 튜토리얼은 제가 녹화한 20편의 영상 튜토리얼인 Webpack 2 Video Tutorials를 참고하시면 됩니다.
다음은 v3.0 릴리스의 기능 목록입니다.

  • node_modules는 더 이상 통계에서 ~로 변경되지 않습니다. [급격한 변경 사항]

  • HMR 요청에 대한 시간 제한을 구성할 수 있습니다.

  • 실험적 범위 끌어올리기(webpack.optimize.ModuleConcatenationPlugin)

  • 몇 가지 성능 개선

  • 라이브러리에 대한 내보내기를 선택하기 위해 output.libraryExport를 추가했습니다.

  • sourceMapFilename은 이제 [contenthash] [급격한 변경]을 지원합니다.

  • module.noParse는 기능을 지원합니다

  • add node: 모든 노드 특정을 비활성화하는 false 옵션 추가

1.1 업데이트 방법 및 버전 마이그레이션

명령어를 통해 직접 설치할 수도 있고, 이후에 버전 번호를 추가해야 합니다.

npm install webpack@3.0.0 --save-dev

또는

yarn add webpack@3.0.0 --dev

Webpack 2에서 Webpack 3으로 업그레이드하는 공식 단어는 다음과 같습니다.

터미널에서 업그레이드 명령을 실행하는 것 외에는 노력하지 마세요

따라서 버전 번호는 변화는 있었지만 큰 변화는 없을 테니 안도의 한숨을 쉬셔도 됩니다.

1.2 Scope Hoisting

이전의 모든 모듈은 독립적인 함수 클로저에 포함되어 있었습니다. 이 처리 방법은 브라우저에서 코드 실행이 느려지는 문제를 일으켰습니다.
개발팀에서는 Closure Compiler, RollupJS 등의 프레임워크를 참고한 후 함수 클로저의 래핑 방식을 구성 가능한 형태로 변경했습니다.
이전 플러그인에서 구성하면 됩니다.

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

물론 일부 모듈의 로딩으로 인해 구성이 성공하지 못할 수도 있습니다. 구성 실패의 원인을 디버깅하기 위해 공식 CLI 매개변수 --display-optimization-bailout이 제공됩니다. --display-optimization-bailout 用于 debug 是什么原因导致了配置失败。

1.3 Magic Comments

其实就是可以命令 chunk name 了。

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

更多的使用可以参考这里。

2. 接下来的新特性

  • 更好的编译缓存

  • 更快的首次以及增量编译速度

  • 对 TypeScript 更加友好地支持

  • 修改 Long term caching

  • 增加对 WASM Module 的支持

  • 用户体验的改进

3. 总结

总体看来变化不大,而且如 Magic Comments

1.3 Magic Comments🎜🎜 실제로 청크 이름을 명령할 수 있습니다. 🎜rrreee🎜자세한 사용법은 여기를 참고해주세요. 🎜🎜2. 다음 새로운 기능🎜🎜🎜🎜더 나은 컴파일 캐싱🎜🎜🎜🎜더 빠른 첫 번째 및 증분 컴파일 속도🎜🎜🎜🎜TypeScript에 대한 더 친숙한 지원🎜🎜🎜🎜장기 캐싱 수정🎜 🎜🎜🎜지원 추가 WASM 모듈용 🎜🎜🎜🎜사용자 경험 개선🎜🎜🎜🎜3. 요약🎜🎜전반적으로 큰 변화는 없으며, 매직댓글 등의 기능은 이미 2.4에서 최신 버전으로 출시되었습니다. , 3.0 버전을 출시하는 것은 주로 더 나은 제품을 제공하려는 팀의 결의의 상징이라고 생각합니다. 🎜

위 내용은 Webpack3의 새로운 기능은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
VUE3入门教程:使用Webpack进行打包和构建VUE3入门教程:使用Webpack进行打包和构建Jun 15, 2023 pm 06:17 PM

Vue是一款优秀的JavaScript框架,它可以帮助我们快速构建交互性强、高效性好的Web应用程序。Vue3是Vue的最新版本,它引入了很多新的特性和功能。Webpack是目前最流行的JavaScript模块打包器和构建工具之一,它可以帮助我们管理项目中的各种资源。本文就为大家介绍如何使用Webpack打包和构建Vue3应用程序。1.安装Webpack

vite和webpack的区别是什么vite和webpack的区别是什么Jan 11, 2023 pm 02:55 PM

区别:1、webpack服务器启动速度比vite慢;由于vite启动的时候不需要打包,也就无需分析模块依赖、编译,所以启动速度非常快。2、vite热更新比webpack快;vite在HRM方面,当某个模块内容改变时,让浏览器去重新请求该模块即可。3、vite用esbuild预构建依赖,而webpack基于node。4、vite的生态不及webpack,加载器、插件不够丰富。

如何使用PHP和webpack进行模块化开发如何使用PHP和webpack进行模块化开发May 11, 2023 pm 03:52 PM

随着Web开发技术的不断发展,前后端分离、模块化开发已经成为了一个广泛的趋势。PHP作为一种常用的后端语言,在进行模块化开发时,我们需要借助一些工具来实现模块的管理和打包,其中webpack是一个非常好用的模块化打包工具。本文将介绍如何使用PHP和webpack进行模块化开发。一、什么是模块化开发模块化开发是指将程序分解成不同的独立模块,每个模块都有自己的作

vue webpack可打包哪些文件vue webpack可打包哪些文件Dec 20, 2022 pm 07:44 PM

在vue中,webpack可以将js、css、图片、json等文件打包为合适的格式,以供浏览器使用;在webpack中js、css、图片、json等文件类型都可以被当做模块来使用。webpack中各种模块资源可打包合并成一个或多个包,并且在打包的过程中,可以对资源进行处理,如压缩图片、将scss转成css、将ES6语法转成ES5等可以被html识别的文件类型。

Webpack是什么?详解它是如何工作的?Webpack是什么?详解它是如何工作的?Oct 13, 2022 pm 07:36 PM

Webpack是一款模块打包工具。它为不同的依赖创建模块,将其整体打包成可管理的输出文件。这一点对于单页面应用(如今Web应用的事实标准)来说特别有用。

webpack怎么将es6转成es5的模块webpack怎么将es6转成es5的模块Oct 18, 2022 pm 03:48 PM

配置方法:1、用导入的方法把ES6代码放到打包的js代码文件中;2、利用npm工具安装babel-loader工具,语法“npm install -D babel-loader @babel/core @babel/preset-env”;3、创建babel工具的配置文件“.babelrc”并设定转码规则;4、在webpack.config.js文件中配置打包规则即可。

web前端打包工具有哪些web前端打包工具有哪些Aug 23, 2022 pm 05:31 PM

web前端打包工具有:1、Webpack,是一个模块化管理工具和打包工具可以将不同模块的文件打包整合在一起,并且保证它们之间的引用正确,执行有序;2、Grunt,一个前端打包构建工具;3、Gulp,用代码方式来写打包脚本;4、Rollup,ES6模块化打包工具;5、Parcel,一款速度极快、零配置的web应用程序打包器;6、equireJS,是一个JS文件和模块加载器。

web是前端还是后端web是前端还是后端Aug 24, 2022 pm 04:10 PM

web有前端,也有后端。web前端也被称为“客户端”,是关于用户可以看到和体验的网站的视觉方面,即用户所看到的一切Web浏览器展示的内容,涉及用户可以看到,触摸和体验的一切。web后端也称为“服务器端”,是用户在浏览器中无法查看和交互的所有内容,web后端负责存储和组织数据,并确保web前端的所有内容都能正常工作。web后端与前端通信,发送和接收信息以显示为网页。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구