TOPICS OF THIS TALK ▸ Why do we need a Module Bundler/TaskRunner ▸ What is Webpack? ▸ Gulp vs. Webpack ▸ Webpack Basics ▸ Why I think Webpack is the way to go
USER EXPERIENCE We want the page to load as fast as possible. ‣ Minification and concatenation of CSS ‣ Uglification and concatenation of JS ‣ Image Optimisation
We want to use the latest features in a productive way. ▸ Enhance CSS with SASS ▸ Use the latest JS features with Babe Keep your job exiting. Be as productive as possible ‣ Automate tasks that can be automated (Autoprefixer, …) DEVELOPER EXPERIENCE
At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles. https://webpack.js.org/concepts/
Gulp solves the problem of repetition. Many of the tasks that web developers find themselves doing over and over on a daily basis can be simplified by becoming automated. Gulp is a javascript task runner that lets you automate tasks http://brandonclapp.com/what-is-gulp-js-and-why-use-it/
IT DEPENDS ON PERSONAL TASTE gulpfile.js ▸ get rid of bootstrap ▸ get rid of jQuery ▸ get rid of gulp ▸ get prepared for the shiny „new“ JavaScript frameworks webpack.dev.js ▸ write own grid and styling system use CSS- Grid ▸ write Vanilla JS, start using ES6-features more often ▸ start using web pack ▸ start using VUE.JS
Webpack uses a dependency graph. When you bundle a project using webpack, it traverses the imports, constructing a dependency graph of the project and then generates output based on the configuration. Additionally, it's possible to define split points to create separate bundles within the project code itself. https://survivejs.com/webpack/what-is-webpack/
Hot Module Replacement You are likely familiar with tools, such as LiveReload or BrowserSync already. These tools refresh the browser automatically as you make changes. Hot Module Replacement (HMR) takes things one step further. In the case of React, it allows the application to maintain its state without forcing a refresh. https://survivejs.com/webpack/what-is-webpack/
WHY IS THAT GREAT? ▸ Since webpack is based on JavaScript code modules, it knows how to concatenate your assets. ▸ JavaScript code modules are a concept introduced in Gecko 1.9 (browser engine) and can be used for sharing code between different privileged scopes. ▸ This is great if you have a lot of JS files. You don’t have to remember the correct order to load your JS files webpack will sort them out and creates a single file to load in your index.html/page.ss.
WHAT IS A WEBPACK MODULE In contrast to Node.js modules, webpack modules can express their dependencies in a variety of ways. A few examples are: ‣ An ES2015 import statement ‣ A CommonJS require() statement ‣ An AMD define and require statement ‣ An @import statement inside of a css/sass/less file. ‣ An image url in a stylesheet (url(...)) or html () file. https://webpack.js.org/concepts/modules/
ENTRY: An entry point indicates which module webpack should use to begin building out its internal dependency graph. webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly). entry: { app: ['./src/js/entry.js', './src/css/main.scss'], myAwesomeComponent: ['./src/components/myAwesomeComponent.js'] },
The output property tells webpack where to emit the bundles it creates and how to name these files. It defaults to ./dist/main.js for the main output file and to the ./dist folder for any other generated file. output: { filename: javascript/[name].[contenthash].js path: path.resolve(__dirname, „./dist“), }, OUTPUT:
LOADERS: Out of the box, webpack only understands JavaScript files. Loaders allow webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph. { test: /\.(png|svg|jpe?g|gif)$/, loader: 'file-loader', options: { name: 'images/[name].[ext]', } },
PLUGINS: While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables. new PurifyCSSPlugin({ paths: (Files), purifyOptions: { minify: true, info: true, rejected: true, whitelist: ['*js*'] } }),
▸ Webpack is a module bundler, but you can also use it running tasks as well. ▸ Webpack relies on a dependency graph underneath. Webpack traverses through the source to construct the graph, and it uses this information and configuration to generate bundles. ▸ Webpack relies on loaders and plugins. Loaders operate on a module level, while plugins rely on hooks provided by webpack and have the best access to its execution process.
▸ Webpack’s configuration describes how to transform assets of the graphs and what kind of output it should generate. Part of this information can be included in the source itself if features like code splitting are used. ▸ Hot Module Replacement (HMR) helped to popularize webpack. It's a feature that can enhance the development experience by updating code in the browser without needing a full page refresh. ▸ Webpack can generate hashes for filenames allowing you to invalidate past bundles as their contents change.
▸ If you develop JavaScript heavy applications? => Definitely ▸ If front end bundlers and optimisation tools are new to you? => Go for it ▸ If you want to stay up to date with all the crazy JS stuff? => Go for it ▸ If you don’t us much JS in your projects and have a working Gulp Grunt etc. Workflow. => Stay with what you got!
▸ Lets be honest: I got caught by the hype. ▸ I was in the mood for something new. ▸ SilverStripe uses webpack. ▸ VUE, React and Angular use webpack. ▸ As it is already version 4 I consider it to be stable ▸ I guess it will stay around for a while
▸ I think that wrappers for tools are great as long as you know how to use the technology under the hood. ▸ The chance is very high that the wrapper is missing a feature you need. So you have to understand what is really going on. It may even be more in the way than been helpful. ▸ So better start with understanding the tool before you choose to go with a helper.
▸ Webpack is not as hard as every one says. You can do it. ▸ Web development isn’t about the web developer and using the most shiniest tools! It is all about user experience and conversions. ▸ Always stay with the KISS principle: ▸ KEEP IT SIMPLE STUPID
addyosmani
colly
sachag
zakiwarfel
shpigford
orderedlist
rasmusluckow
kevinliebholz
trishagee
cherdarchuk