## WEBPACK 5 – WHAT'S NEW TOBIAS KOPPERS TWITTER: @WSOKRA GITHUB: @SOKRA ## ORGANIZATION • WEBPACK 5 → WEBPACK CORE (webpack/webpack) MAJOR VERSION 5 • OTHER REPOS DEVELOP INDIVIDUALLY → SEPARATE SEPARATE MAJOR VERSIONS • DEVELOPMENT ON webpack/webpack#next • ~1K COMMITS COMPARED TO MASTER • ~500 PRs MERGED ## CATEGORIES • HOTNESS/BENEFIT: • RISK OF BREAKING: ☐ ☐ ☐ • RISK OF BUGS: ☐☐☐☐ ## NODE import crypto from "crypto"; ## WEBPACK 4 • COMPILED SUCCESSFUL • CRYPTO POLYFILL 301KB • LIMITED FEATURES • OUTDATED • INSTALLED WITH WEBPACK WEBPACK 5 • "CRYPTO" CANNOT BE RESOLVED

目录 CONTENTS 01 | webpack 5 新特性解析 02 | bundle 和 bundleless 的差异 03 | Vite 的构建原理 ## webpack 5 在 2020–10–10 正式发布 #### 官方 changelog：https://webpack.js.org/blog/2020-10-10-webpack-5-release/ DOCUMENTATION DOCUMENTATION CONTRIBUTE VOTE BLOG 📱 📸 📸 📸 webpack v5.2.0 > Blog Webpack 5 release (2020-10-... Common Questions So what does the relea... So when is the time to ... Sponsoring Update General direction Module Federation Major Changes: New Web Pla EDIT DOCUMENT ✓ | Print Document ☐ ## Webpack 5 release [2020-10-10] webpack 4 was released in February 2018. Since then we shipped a lot of features without

## WRITING A LOCALIZATION PLUGIN FOR WEBPACK 5 TOBIAS KOPPERS GITHUB: @SOKRA TWITTER: @WSOKRA ## MOTIVATION • WEB APP IN MULTIPLE LANGUAGES • EFFICIENT DELIVERY ONLY NECESSARY LOCALIZATION DATA SHOULD f7341a5a76d70/p2_1.jpg) • EFFICIENT BUILD • SINGLE BUILD FOR ALL LANGUAGES (COMPARED TO BUILDING THE APPLICATION PER LANGUAGE)   • FOR CAPTURE LOCALIZATION DATA FROM loc.json FILES • GENERATE A JSON FILE PER LANGUAGE AND CHUNK COMBINATION

## WEBPACK 5 WHY BREAKING CHANGES? A CHANGELOG ONLY TELLS HALF OF THE STORY TOBIAS KOPPERS ## TOBIAS KOPPERS • GITHUB: @sokra • TWITTER: @wSokra • 2012: I CREATED WEBPACK. • SINCE 2017: I WORK FULL-TIME FULL-TIME ON WEBPACK AS PART OF THE CORE TEAM. Gold Sponsors ## Platinum Sponsors Platinum Sponsors are those who have pledged $50,000 or more to webpack.  ## WEBPACK 5 • ME: YEAH. WEBPACK 5 IS COMING • MAYBE YOU: • YEAH. WEBPACK 5 IS COMING. • OH

## MY STORY WITH WEBPACK TOBIAS KOPPERS Github: @sokra TWITTER: @wSokra ## THE STORY FOLLOWED BY “NOW” AND “THE FUTURE” • STUDIED COMPUTER SCIENCE - JAVA • DISCOVERED GOOGLE WEB TOOLKIT (GWT) JAVA 2012 : WEBPACK • MY INITIAL IDEA WAS TO ADD THIS TO modules-webmake But because it was a completely new approach: I WAS ASKED TO RENAME THE PROJECT sokra/modules-webpack - LATER webpage/webpack ## 2012 #16 ## webpack /webpack Code ! Issues 14 Pull requests 2 2012: CONTINUED DEVELOPMENT • ALIGN WITH NODE.JS COMMONJS • ADDED AMD SUPPORT IMPORTANT FEATURE FOR REQUIRE.JS MIGRATION • webpack-dev-middleware/server

## WEBPACK + WEBASSEMBLY WEBPACK AND THE CHALLENGE OF WEBASSEMBLY ## INTRODUCTION WEBASSEMBLY AND ESM ## WEBASSEMBLY? • Low-Level BINARY FORMAT FOR CODE • TYPED (I8 – I64, F32, F64) - MEMORY • USUALLY ARE EVALUATED IN ORDER OF OCCURRENCE (IMPORTS) ## ADDING WASM TO WEBPACK ## THE STORY • So we want to add WebAssembly support to Webpack. • How to do that? Let's start with an prototype and find CAN COVER A PART OF THE IMPLEMENTATION COST ## GOALS • EASY TO USE • HIDE TECHNICAL DETAILS • WEBPACK DOESN'T CARE ABOUT HIGH-LEVEL LANGUAGE (C/C++, Rust) PERFORMANT (PRIMARY RUNTIME, BUT ALSO BUILD)

## How ## webpack ## works Tobias Koppers ## About me • Tobias Koppers • M. Sc. Computer Science • Started with Open Source in 2012 as Hobby • Since 2017: Freelancer (Open Source + Consulting) • Twitter: @wSokra • Github: @sokra ## Agenda Walkthrough:webpack • You should get a rough understanding of the implementation of webpack. • You should know where to look into when customizing. • for customization are highlighted. ## Customization • You will learn how to write plugins for webpack. • We won’t list every possible customizable thing. Plugins Name class MyPlugin { apply(compiler)

## webpack THE PAST THE PRESENT THE FUTURE TOBIAS KOPPERS GITHUB @SOKRA TWITTER: @WSOKRA ## THE PAST PROBLEMS BUNDLER SOLVE A SHORT WEBPACK HISTORY LESSON ## PROBLEMS BUNDLERS SOLVE • SCRIPT TAGS DEPENDENCIES GRAPH • DISCONNECT BETWEEN JS, CSS, OTHER ASSETS  • CONTENT HASHING, INLINING - CONCATENATING ALL JS/CSS IS UNSUITABLE FOR LARGE APPLICATION - INITIAL LOAD TIME IS IMPORTANT  • SAVE → BUILD → RELOAD WORKFLOW IS SLOW • USING NEW TECHNOLOGIES

## 玩转 webpack 腾讯IVWEB 程柳锋 ## ☐ ☐ ☐ ☐ ## 扫码试看/订阅《玩转 webpack》 ## 目录 CONTENTS 01 | 基础篇：webpack 与构建发展简史 02 | 基础篇：webpack 基础用法 03 | 基础篇：webpack 进阶用法 04 | 进阶篇：编写可维护的webpack 构建配置 05 | 进阶篇：webpack 进阶篇：webpack 构建速度和体积优化策略 06 | 原理篇：通过源码掌握webpack 打包原理 07 | 原理篇：编写 Loader 和插件 08 | 实战篇：React 全家桶 和webpack 开发商城项目 ## 核心概念之 Entry Entry 用来指定 webpack 的打包入口 ## 理解依赖图的含义  依赖图的入口是 entry 对于非代码比如图片、字体依赖也会不断加入到依赖图中 ## Entry 的用法 单入口：entry 是一个字符串 module.exports = { entry: './path/to/my/entry/file.js' }; 多入口：entry

## 目录 01 | 基础篇：webpack 与构建发展简史 02 | 基础篇：webpack 基础用法 03 | 基础篇：webpack 进阶用法 04 | 进阶篇：编写可维护的webpack 构建配置 05 | 进阶篇：webpack 构建速度和体积优化策略 06 | 原理篇：通过源码掌握webpack 打包原理 07 | 原理篇：编写 Loader 全家桶 和webpack 开发商城项目 ## ☐ ☐ ☐ ☐ ## 扫码试看/订阅《玩转webpack》 ## 当前构建时的问题 每次构建的时候不会清理目录，造成构建的输出目录 output 文件越来越多 ## 通过 npm scripts 清理构建目录 rm -rf ./dist &&webpack rimraf ./dist &&webpack ## 自动清理构建目录 - o-border-radius: 10px; - border-radius: 10px; }  如何在编写 CSS 不需要添加前缀？ ## PostCSS 插件 autoprefixer 自动补齐 CSS3 前缀 module.exports