MY STORY WITH WEBPACK TOBIAS KOPPERS GITHUB: @sokra TWITTER: @wSokra THE STORY FOLLOWED BY “NOW” AND “THE FUTURE” 2008 • STUDIED COMPUTER SCIENCE • JAVA • DISCOVERED GOOGLE WEB TOOLKIT (GWT) 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 webpack/webpack ALIGN WITH NODE.JS COMMONJS • ADDED AMD SUPPORT • IMPORTANT FEATURE FOR REQUIRE.JS MIGRATION • webpack-dev-middleware/server 2012: MULTI-THREADING • MULTI-THREADING • YES, THIS WAS ACTUALLY A FEATURE

WEBPACK + WEBASSEMBLY W E B P A C K A N D T H E C H A L L E N G E O F W E B A S S E M B L Y INTRODUCTION WEBASSEMBLY AND ESM WEBASSEMBLY? • LOW-LEVEL BINARY FORMAT FOR CODE • TYPED (I8 – I64, F32 DEPENDENCIES 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 PROBLEMS THIS 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)

• 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. • We points for customization are highlighted. • Customization • You will learn how to write plugins for webpack. • We won’t list every possible customizable thing. Plugins class MyPlugin { apply(compiler) { unexpectedly. Walkthrough webpack • webpack is very object-orientated • Design is probably not perfect • We start our walkthrough from top down to bottom • Start: Invoking the CLI: webpack entry.js bundle.js

• • https://github.com/webpack/webpack.js.org • • • • • • • • • • • • • • • • • • • • • • • • • • https://npm-stat.com/charts.html?package=webpack https://ashleynolan.co. a web app optimizer a help for development support native web apps and optimize them minimize webpack- specific syntax or make it optional (hint) follow latest specs e. g. for HTML, CSS, JSON, WASM

WEBPACK 5 – WHAT’S NEW • CORE MAJOR • • • • 2 • • • 3 • • 301KB • • • • “CRYPTO” CANNOT BE RESOLVED yarn add resolve alias 4 ? ??? ? • • • • • • 3A2B1C. • • LOGIN.JS • 2 (dev) [id].js (prod) [name].js webpack 4 import("./module"); 1.js 1.js 1.js import( /* webpackChunkName: "something" */ "./module"); 1.js 1.js something.js webpack 5 import("./module"); src_module_js • CODE FOR __webpack_require__.n IS ALWAYS IN THE RUNTIME CODE • MAYBE UNNEEDED RUNTIME CODE IN THE BUNDLE • RuntimeRequirements • • • • ONLY RUNTIME CODE THAT’S NEEDED __webpack_require__.n

WHY BREAKING CHANGES? • @sokra • @wSokra • WEBPACK • FULL-TIME CORE TEAM • YEAH WEBPACK 5 • • • BREAKING CHANGES • BREAK MY BUILD • INVEST TIME • WHY • WHY LARGEST BREAKING CHANGES • BONUS PLUGIN API SURFACE • LONG TERM GOALS • FEATURES • CLEANUP WORK • REFACTORING MODERNIZATION webpack.js.org/vote • • • BETTER PERFORMANCE • DISK • LONG TERM CACHING • • EASIER RELIABLE • •

Did you know …? 15 less known webpack features in 15 minutes Goals Goals • Overview over less known features • Short • Learn something new • Code Samples Non-Goals • Detailed How-to-Use the features features • Well formatted • Amazing Animations import() • webpack 3 added a new syntax to load modules on demand. • It‘s covered by spec. Native support by Chrome and Safari. Usage: import("./module comment • A magic comment allows to provide (webpack-specific) extra information. • Chunk name, context mode (webpack 3) • Include, Exclude files (webpack 4) // for a single file import(/* webpackChunkName:

.......................................................................... 56 ES6 modules and Webpack ................................................................................................ .................................................... 127 15. BabelJS — Working with Babel and Webpack ....................................................................................... 129 16 upcoming version of JavaScript — ES6, ES7, ESNext, etc. ● BabelJS can be used along with gulp, webpack, flow, react, typescript, etc. making it very powerful and can be used with big project making developer’s

@babel/core @babel/preset-env webpack webpack-cli webpack-dev-server E:\rxjsproj>npm install --save-dev babel-loader @babel/core @babel/preset-env webpack webpack-cli webpack-dev-server npm WARN "arch":"x64"} ) + webpack-dev-server@3.8.0 + babel-loader@8.0.6 + @babel/preset-env@7.6.0 RxJS 7 + @babel/core@7.6.0 + webpack-cli@3.3.8 + webpack@4.39.3 added 675 packages server to execute our Html file, we will use webpack-server. The command "publish" in package.json will help us start as well as pack all the js files using webpack . The packed js files which are our final