Home
Search results “Babel webpack options”
Use Babel & Webpack To Compile ES2015 - ES2017
 
29:54
In this video we will build the Babel Webpack Starter Pack which is a workflow to compile ES2015/ES6, ES2016/ES7 and ES2017 code down to ES5. This allows us to use ES6 modules and later ECMAScript features such as async/await. We will also setup webpack-dev-server to have an auto load server without having to re-compile SPONSOR: GDP HOST - WANT CHEAP WEB HOSTING? https://goo.gl/iZjcGk CODE: https://github.com/bradtraversy/babel_webpack_starter 💖 BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia VISIT MY WEBISTE: Check Out My Udemy Courses http://www.traversymedia.com FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia https://discord.gg/traversymedia
Views: 31307 Traversy Media
Webpack 2 - Style, CSS and Sass loaders
 
17:16
What you will learn: - How to load css to your Webpack project - How to configure Webpack 2 with Style, CSS and Sass loaders - How to use Extract Text Webpack Plugin to generate css file NOTE 12:32 - disabled in the ExtractTextPlugin should be disable Working files: https://github.com/Ihatetomatoes/webpack-101-starter Hit the like button and if we reach 100 likes in the first 24hrs from publishing, I will upload the next video straight away. No need to wait till next week. You rock! THE BEST OF https://ihatetomatoes.net/the-best-of/ SUBSCRIBE https://www.youtube.com/channel/UC7O6CntQoAI-wYyJxYiqNUg?sub_confirmation=1 LET'S CONNECT! Ihatetomatoes -- https://www.facebook.com/ihatetomatoesblog/ -- http://www.google.com/+ihatetomatoes Petr Tichy -- https://plus.google.com/+PetrTichy -- http://twitter.com/ihatetomatoes -- https://codepen.io/ihatetomatoes
Views: 51555 Ihatetomatoes
Webpack 2 - How to install React and Babel
 
07:47
What you will learn: - How to install and setup React with Webpack 2 - How to configure babel loader and react Hit the like button and if we reach 100 likes in the first 24hrs from publishing, I will upload the next video straight away. No need to wait till next week. Thank you! THE BEST OF https://ihatetomatoes.net/the-best-of/ SUBSCRIBE https://www.youtube.com/channel/UC7O6CntQoAI-wYyJxYiqNUg?sub_confirmation=1 LET'S CONNECT! Ihatetomatoes -- https://www.facebook.com/ihatetomatoesblog/ -- http://www.google.com/+ihatetomatoes Petr Tichy -- https://plus.google.com/+PetrTichy -- http://twitter.com/ihatetomatoes -- https://codepen.io/ihatetomatoes
Views: 23233 Ihatetomatoes
Webpack 2 - How to load images with Webpack 2
 
15:20
What you will learn: - How to load images with Webpack 2 - How to use file-loader and image-webpack-loader Hit the like button and if we reach 100 likes in the first 24hrs from publishing, I will upload the next video straight away. No need to wait till next week. Thank you! THE BEST OF https://ihatetomatoes.net/the-best-of/ SUBSCRIBE https://www.youtube.com/channel/UC7O6CntQoAI-wYyJxYiqNUg?sub_confirmation=1 LET'S CONNECT! Ihatetomatoes -- https://www.facebook.com/ihatetomatoesblog/ -- http://www.google.com/+ihatetomatoes Petr Tichy -- https://plus.google.com/+PetrTichy -- http://twitter.com/ihatetomatoes -- https://codepen.io/ihatetomatoes
Views: 21734 Ihatetomatoes
Source Maps 101 + Webpack - Ep. 6
 
07:31
Source maps are an integral tool to accurately pinpointing bugs within our source code—the files we actually write code in. Browsers typically read code from a distribution directory that contains bundled and minified files. This is fine until one realizes that the error message they're receiving in the console is for line 1 of a minified file. To fix this bug, you'd have to sift through the minified file, switch over to a source file, and then use a search command to find the issue from there. This is cumbersome, time consuming, and flat out annoying process—but luckily for us, source maps provide an easy to implement fix. This video will teach you the basics as to what source maps are, why we'd want to use them, and how to implement them using webpack. Git Repo so You Can Follow Along: https://github.com/christopher4lis/cc-source-maps-webpack Timeline: 0:34 - Tutorial starts 0:40 - What is a source map? 1:09 - Illustration as to why we'd want to use source maps 2:35 - Implementing source maps for JS 2:58 - Source map devtool options 5:05 - Implementing source maps for CSS Resources: https://webpack.github.io/docs/configuration.html Beatz: Immortal Beats - Oh Wee - Creative Commons For updates on the progress of chriscourses.com and future videos, join the Chris Courses mailing list at http://chriscourses.com. Support Chris Courses Through Patreon: -------------------------------------- https://www.patreon.com/chriscourses Chris Courses Social: --------------------- Twitter: https://twitter.com/chriscourses Facebook: https://www.facebook.com/chriscourses Instagram: https://www.instagram.com/chriscourses Christopher Lis Social: ----------------------- Twitter: https://twitter.com/christopher4lis CodePen: http://codepen.io/christopher4lis
Views: 4721 Chris Courses
Getting Started With Babel
 
21:42
► SPONSORS ◄ DevMountain Coding Bootcamp https://goo.gl/P4vgKS Some of my other work... https://www.udemy.com/user/christopher-hawkes-3/ Social: https://twitter.com/RealChrisHawkes
Views: 6027 Chris Hawkes
HTML + IMAGE LOADERS | Webpack 2 Basics Tutorial
 
15:08
Learn Webpack 2 - what it is, how it works and how to use it! The full source code can be found in the following Github repo (choose the right branch!): https://github.com/mschwarzmueller/yt-webpack2-basics Choose the 05-webpack-babel-scss-basic-finished branch to start with the same project I do! The video for the basic Babel + CSS workflow can be found here: https://youtu.be/8vnkM8JgjpU Want to become a frontend developer? Consider diving into some of my courses on Udemy: Ionic 2 - The Practical Guide for only $15: https://www.udemy.com/ionic-2-the-practical-guide-to-building-ios-android-apps/?couponCode=GETINTOIT Angular - The Complete Guide for only $15, too: https://www.udemy.com/the-complete-guide-to-angular-2/?couponCode=YOUTUBE_2 Vue.js 2 - The Complete Guide for only $15: https://www.udemy.com/vuejs-2-the-complete-guide/?couponCode=YOUTUBE_VUE Want to get some 1-on-1 coaching with experienced developers? Have a look at Savvy: https://www.savvy.is/?ref=9fee2b (Discount Code 9fee2b) You can follow me on Twitter (@maxedapps), Facebook (https://www.facebook.com/academindchannel/) or visit our Website (https://www.academind.com). See you in the videos!
Views: 40794 Academind
how to compile Es6 to Es5 using babel cli
 
09:47
JavaScript ES6 — write less, do more. JavaScript ES6 brings new syntax and new awesome features to make your code more modern and more readable. It allows you to write less code and do more. ES6 introduces us to many great features like arrow functions, template strings, class destruction, Modules… and more.
Views: 82 jayanth babu
Webpack Config Basics - 3. Multiple entry points
 
08:39
In this video we dive a little bit deeper into entry and output and talk about how we can set our config up for multiple bundles in the future.
Views: 6009 matthew hsiung
Webpack 2 with Webpack Dev Server
 
04:55
What you will learn: - How to install, setup and configure Webpack Dev Server Hit the like button and if we reach 100 likes in the first 24hrs from publishing, I will upload the next video straight away. No need to wait till next week. Thank you! Working files: https://github.com/Ihatetomatoes/webpack-101-starter THE BEST OF https://ihatetomatoes.net/the-best-of/ SUBSCRIBE https://www.youtube.com/channel/UC7O6CntQoAI-wYyJxYiqNUg?sub_confirmation=1 LET'S CONNECT! Ihatetomatoes -- https://www.facebook.com/ihatetomatoesblog/ -- http://www.google.com/+ihatetomatoes Petr Tichy -- https://plus.google.com/+PetrTichy -- http://twitter.com/ihatetomatoes -- https://codepen.io/ihatetomatoes
Views: 20421 Ihatetomatoes
Learn Vue 2: Part 22 - Webpack Config From Scratch
 
18:31
You've learned a bit about vue-loader already; however, for learning purposes, let's build up a Webpack configuration file from scratch, so that we can begin extracting and importing modules. This will give you a solid review of the fundamentals, while also providing an opportunity to review just how powerful (yet initially confusing) all this stuff can be. Don't worry: in the next episode, I'll show you some options to simplify new projects that use Webpack. Watch the full series at http://vuecasts.com, or learn more about Vue, and all things web development, at https://laracasts.com.
Views: 4366 Laracasts
Webpack 4  - development or production builds
 
16:05
Webpack 4 has a mode option that allows us to specify a development of production build. This videos gives an overview of what exactly each of these options do for us
Views: 439 A shot of code
DevTrends #34: Babel 7 and TypeScript, webpack size-plugin
 
15:42
This episode topics: Babel 7 and TypeScript - Babel 7 Released: https://babeljs.io/blog/2018/08/27/7.0.0 - TypeScript and Babel 7: https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/ webpack size-plugin - size-plugin: https://github.com/GoogleChromeLabs/size-plugin Thanks for watching! Our website: https://trends.paralect.com Our Twitter: https://twitter.com/paralect Author's Twitter: https://twitter.com/evenfrost
Views: 554 DevTrends
Webpack Config Basics 6. Webpack Dev Server
 
11:42
In this video we look at adding Webpack Dev Server to our setup to ease development. These settings are very basic but are generic enough to work with most projects and make good default settings.
Views: 8041 matthew hsiung
Webpack Tutorial - Replace Gulp/Grunt plugins with a single tool
 
12:17
Webpack has quickly become one of the most popular choices among web developer build tools. It can quickly build, minify, split & do a whole wonder of other things to your code. Sample Webpack Config: https://gist.github.com/learncodeacademy/25092d8f1daf5e4a6fd3 Node.js Introduction: https://www.youtube.com/watch?v=pU9Q6oiQNd0 In this webpack tutorial, I'm going to cover a very basic configuration for webpack that will get you started in a project. It will build all of your Javascript and minify and dedupe the code for production. To code react, we just have a little more configuration to add to our webpack config. That will have a full HTML, CSS, JS react application going. Another great build tool is Browserify, which at the beginning of the process works a LOT like Webpack, but in the end, Webpack is a lot more featureful. -~-~~-~~~-~~-~- Learning Web Development? Watch the FREE COURSE: "Web Development for Absolute Beginners"! https://www.youtube.com/watch?v=gQojMIhELvM -~-~~-~~~-~~-~-
Views: 338332 LearnCode.academy
react js avec webpack, npm et babel
 
15:18
first app settings
Views: 22 ghersi cherifa
ES6 + Webpack Setup | Visual Studio 2015
 
23:01
Check out all my channel for more videos like this one. http://vid.io/xodM In this video we go over how to set-up Visual Studio 2015 with ES6 + Webpack + BabelJs and compile a sample project. Rate | Comment | Subscribe
Views: 11383 Japan Meets Code
Sublime 3 Setup for ES6 / Babel
 
10:01
UPDATE: This video is a little old, and I would highly recommend checking out VS Code! It's a great editor! A few of my favorite tools with Sublime 3. Link to Gist below. Tool mentioned: (Expand to see) - Package Control - Afterglow Theme (You should also check out "Boxy", which is what I'm using nowadays) - Oceanic Next Color Scheme - Babel plugin - Sublime Linter + contrib-eslint Gist of the settings here: https://gist.github.com/quicksnap/e0ccf22f0fdfbe3d16a06b0b20ebddc0
Views: 11250 Dan Schuman
Webpack 2 with Webpack Dev Server Configuration
 
07:02
What you will learn: - How to setup few advanced options with Webpack Dev Server Working files: https://github.com/Ihatetomatoes/webpack-101-starter Hit the like button and if we reach 100 likes in the first 24hrs from publishing, I will upload the next video straight away. No need to wait till next week. Thank you! THE BEST OF https://ihatetomatoes.net/the-best-of/ SUBSCRIBE https://www.youtube.com/channel/UC7O6CntQoAI-wYyJxYiqNUg?sub_confirmation=1 LET'S CONNECT! Ihatetomatoes -- https://www.facebook.com/ihatetomatoesblog/ -- http://www.google.com/+ihatetomatoes Petr Tichy -- https://plus.google.com/+PetrTichy -- http://twitter.com/ihatetomatoes -- https://codepen.io/ihatetomatoes
Views: 19246 Ihatetomatoes
Introduction to Webpack #01
 
10:40
Introduction to Webpack #01
Views: 341 Tarun Sharma
Setting up webpack 2 with Babel (Tutorial)
 
13:27
Hope this video helps someone confused about the whole development process with webpack and es6. If there are any questions feel free to either ask away in the comments or send me a private message. Either way I will try to my best to help! Useful links: babel documentation: https://babeljs.io/docs/setup/ webpack documentation: https://webpack.js.org/guides/get-started/ New to es6? Check out: http://es6-features.org/ *Note: In the video I mention I will create a constant. I am not sure why I said "constant" because the keyword "let" does not define a constant. Rather "let" simply creates a variable. The difference between var and let refers to the scope of the variable: See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let To define a constant in es6 use the keyword "const"
Views: 714 Code Beacon
Webpack 2: A Full Tutorial
 
01:04:52
Full tutorial describing webpack 2's new features. Includes tree shaking, dynamic importing, vendor caching, visualization, hot module replacement, entry, output, loaders, plugins, commons chunk, etc. 00:10 - What is webpack? 00:40 - Basic setup 05:08 - Babel Loader 09:05 - Image Loaders 19:00 - UglifyJs Plugin 21:00 - Key concepts recap 23:10 - Live Reload (webpack-dev-server) 24:55 - Hot Module Replacement (webpack-dev-server) 33:45 - Development main ideas 34:50 - Dynamic Loading 41:50 - Vendor Asset Caching 55:40 - Tree Shaking 1:01:00 - Visualization
Views: 5324 FailingOnward
Setup React and Django in Single Server
 
25:02
Hey guys, this video will help you in integrating django and react together so that you can run your full application while running only your django server. Have fun... Step 1: npm init Step 2: "scripts": { "build": "webpack --config webpack.config.js --progress --colors --mode development", "watch": "webpack --config webpack.config.js --watch --mode development" }, Step 3: npm install --save-dev babel-core [email protected] babel-preset-env babel-preset-react webpack webpack-bundle-tracker webpack-cli Step 4: npm install --save react react-dom Step 5: (webpack.config.js) var path = require("path"); var webpack = require('webpack'); var BundleTracker = require('webpack-bundle-tracker'); module.exports = { context: __dirname, entry: './testapp/static/js/index', output: { path: path.resolve('./testapp/static/bundles/'), filename: "[name]-[hash].js", }, plugins: [ new BundleTracker({filename: './webpack-stats.json'}), ], module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: ['babel-loader'] } ] }, resolve: { extensions: ['*', '.js', '.jsx'] } }; step 6: (.babelrc) { "presets": [ "babel-preset-env", "react" ] } Step 7:(compiling bundles) ./node_modules/.bin/webpack --config webpack.config.js For Watcher: npm run watch DJANGO PART: Package Name: django-webpack-loader Settings.py: INSTALLED_APPS = ( ... 'webpack_loader', ) WEBPACK_LOADER = { 'DEFAULT': { 'BUNDLE_DIR_NAME': 'bundles/', 'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'), } } HTML Template Part: {% load render_bundle from webpack_loader %} ... {% render_bundle 'main' %} ... This is all guys. If any error occured or have any doubt then you can put it in the comments below or contact me: https://www.facebook.com/manjil.dahal1 If you wanna skip the video and directly follow the step you can go to the place from where i learned Credits to her: https://medium.com/uva-mobile-devhub/set-up-react-in-your-django-project-with-webpack-4fe1f8455396
Views: 264 CIS
ReactJS Basics - #2 Setup Workspace with Webpack
 
26:19
This ReactJS Tutorial shows how to set up a Workspace using Webpack. It is Part of the ReactJS Basics Series. Join the full course: https://www.udemy.com/react-the-complete-guide-incl-redux/?couponCode=ACAD_YT Full Source Code available on GitHub (choose the right Branch): https://github.com/mschwarzmueller/reactjs-basics Did you like it? Also have a look at Angular 2: https://www.youtube.com/watch?v=DBjPIabiRNg You can follow me on Twitter (@maxedapps), Facebook (https://www.facebook.com/academindchannel/) or visit our Website (https://www.academind.com).
Views: 225209 Academind
WEBPACK + MULTIPLE HTML FILES | Webpack 2 Basics Tutorial
 
09:17
Learn Webpack 2 - what it is, how it works and how to use it! The full source code can be found in the following Github repo (choose the right branch!): https://github.com/mschwarzmueller/yt-webpack2-basics Choose the 06-webpack-babel-scss-img-html branch to start with the same project I do! The video for the basic Babel + CSS workflow can be found here: https://youtu.be/8vnkM8JgjpU Want to become a frontend developer? Consider diving into some of my courses on Udemy: Ionic 2 - The Practical Guide for only $15: https://www.udemy.com/ionic-2-the-practical-guide-to-building-ios-android-apps/?couponCode=GETINTOIT Angular - The Complete Guide for only $15, too: https://www.udemy.com/the-complete-guide-to-angular-2/?couponCode=YOUTUBE_2 Vue.js 2 - The Complete Guide for only $15: https://www.udemy.com/vuejs-2-the-complete-guide/?couponCode=YOUTUBE_VUE Want to get some 1-on-1 coaching with experienced developers? Have a look at Savvy: https://www.savvy.is/?ref=9fee2b (Discount Code 9fee2b) You can follow me on Twitter (@maxedapps), Facebook (https://www.facebook.com/academindchannel/) or visit our Website (https://www.academind.com). See you in the videos!
Views: 25179 Academind
Webpack Config Basics - 8. Source-maps
 
08:02
In this last video of the basics, I explain the devtools option and when you might want to enable the different source-map options.
Views: 5635 matthew hsiung
Webpack 2 - HTML Webpack Plugin
 
12:25
What you will learn: - How to generate your html templates. - How to use HTML Webpack Plugin. - How to minify your html templates. - and much more Let me know in the comments what you think about this Webpack 2 series. Working files: https://github.com/Ihatetomatoes/webpack-101-starter THE BEST OF https://ihatetomatoes.net/the-best-of/ SUBSCRIBE https://www.youtube.com/channel/UC7O6CntQoAI-wYyJxYiqNUg?sub_confirmation=1 LET'S CONNECT! Ihatetomatoes -- https://www.facebook.com/ihatetomatoesblog/ -- http://www.google.com/+ihatetomatoes Petr Tichy -- https://plus.google.com/+PetrTichy -- http://twitter.com/ihatetomatoes -- https://codepen.io/ihatetomatoes
Views: 39549 Ihatetomatoes
How to Install Webpack, Setup a Config File, and Minify JavaScript  - Ep. 2
 
13:18
Learn how to install webpack and make use of all of the features that come with it right out the box: -Module bundling -Automatic bundling that occurs whenever a file is saved -And JavaScript minification Essentially, we’re going to learn how to install webpack, set up a configuration file, and create a bundle for production. Enjoy! Video Timeline: 00:54 - What is a module? 2:04 - Webpack features that come right out of the box 2:23 - Install webpack 8:42 - Creating a config file 11:36 - Minifying your JavaScript Resources I used to get started with webpack that you may find helpful too: https://medium.com/@dabit3/beginner-s-guide-to-webpack-b1f1a3638460#.nnddinklu https://medium.com/@housecor/browserify-vs-webpack-b3d7ca08a0a9#.gboei1jyk https://github.com/petehunt/webpack-howto Beats: Immortal Beats - Oh Wee - Creative Commons For updates on the progress of chriscourses.com and future videos, join the Chris Courses mailing list at http://chriscourses.com. Support Chris Courses Through Patreon: -------------------------------------- https://www.patreon.com/chriscourses Chris Courses Social: --------------------- Twitter: https://twitter.com/chriscourses Facebook: https://www.facebook.com/chriscourses Instagram: https://www.instagram.com/chriscourses Christopher Lis Social: ----------------------- Twitter: https://twitter.com/christopher4lis CodePen: http://codepen.io/christopher4lis
Views: 16875 Chris Courses
Webpack 2 - How to load Twitter Bootstrap with Webpack 2
 
20:08
What you will learn: - How to include Twitter Bootstrap in your Webpack 2 project - How to customize Bootstrap and only include what you want Hit the like button and if we reach 100 likes in the first 24hrs from publishing, I will upload the next video straight away. No need to wait till next week. Thank you! Git Repo https://github.com/Ihatetomatoes/webpack-101-bootstrap THE BEST OF https://ihatetomatoes.net/the-best-of/ SUBSCRIBE https://www.youtube.com/channel/UC7O6CntQoAI-wYyJxYiqNUg?sub_confirmation=1 LET'S CONNECT! Ihatetomatoes -- https://www.facebook.com/ihatetomatoesblog/ -- http://www.google.com/+ihatetomatoes Petr Tichy -- https://plus.google.com/+PetrTichy -- http://twitter.com/ihatetomatoes -- https://codepen.io/ihatetomatoes
Views: 23627 Ihatetomatoes
Webpack Loaders for CSS, SCSS, ES6, and JSHint -  Ep. 3
 
14:24
In this video, I cover an array of webpack loaders that'll help optimize your code and allow you to make use of SASS and ES6. Learn how to use webpack loaders to load and minify your CSS, compile your SASS, SCSS, and ES6 code; and lint your code with JSHint. Enjoy! Git repo so you can follow along: https://github.com/christopher4lis/cc-webpack-loaders Timeline: 00:12 - Setting up our project for use of webpack loaders 00:48 - Adding a config file 01:56 - CSS setup 07:39 - SCSS setup 09:16 - ES6 setup 11:34 - Linting with JSHint 13:40 - Upcoming course Resources I used to get started with webpack that you may find helpful too: https://medium.com/@dabit3/beginner-s-guide-to-webpack-b1f1a3638460#.nnddinklu https://medium.com/@housecor/browserify-vs-webpack-b3d7ca08a0a9#.gboei1jyk https://github.com/petehunt/webpack-howto Beats: Immortal Beats - Oh Wee - Creative Commons For updates on the progress of chriscourses.com and future videos, join the Chris Courses mailing list at http://chriscourses.com. Support Chris Courses Through Patreon: -------------------------------------- https://www.patreon.com/chriscourses Chris Courses Social: --------------------- Twitter: https://twitter.com/chriscourses Facebook: https://www.facebook.com/chriscourses Instagram: https://www.instagram.com/chriscourses Christopher Lis Social: ----------------------- Twitter: https://twitter.com/christopher4lis CodePen: http://codepen.io/christopher4lis
Views: 21191 Chris Courses
Webpack 2 - How to use pug (jade) templates with Webpack
 
06:36
What you will learn: - How to use Pug (Jade) templates with Webpack 2 Note: if you are having issues with pug-html-loader try also pug-loader. https://github.com/willyelm/pug-html-loader https://github.com/pugjs/pug-loader Hit the like button and if we reach 100 likes in the first 24hrs from publishing, I will upload the next video straight away. No need to wait till next week. Thank you! THE BEST OF https://ihatetomatoes.net/the-best-of/ SUBSCRIBE https://www.youtube.com/channel/UC7O6CntQoAI-wYyJxYiqNUg?sub_confirmation=1 LET'S CONNECT! Ihatetomatoes -- https://www.facebook.com/ihatetomatoesblog/ -- http://www.google.com/+ihatetomatoes Petr Tichy -- https://plus.google.com/+PetrTichy -- http://twitter.com/ihatetomatoes -- https://codepen.io/ihatetomatoes
Views: 17253 Ihatetomatoes
Webpack 2 - A full tutorial
 
01:42:50
A full tutorial of Webpack 2. Code and links available at Github: https://github.com/emiloberg/webpack-tutorial 00:00 Initiating project, installing Webpack 2 09:31 Creating our first module 13:13 Creating Webpack settings file + watch mode 16:57 Hot Reload & Hot Module Replacement 26:19 Separating production and development build 30:48 Using Babel to transpile ES2016/ES6 to ES5, and adding your first loader 37:05 Adding source map 44:30 Adding an image with file-loader 49:00 Adding an image with url-loader 54:00 Tree shaking + UglifyJS to eliminate dead code 1:05:46 Adding CSS with style-loader and css-loader 1:12:44 Extract from head to a separate css-file with ExtractTextPlugin 1:19:07 Generating a HTML file when building with HTMLWebpackPlugin 1:25:00 Code splitting and loading code on demand 1:32:30 Adding an external module/library 1:38:20 Final comments and links This tutorial is suited for you who've never used Webpack before and you who've used it but don't really understand what's happening in those configuration files you've downloaded from someone elses boilerplate. If you use Windows, specify environment variables with "set NODE_ENV=", e.g: "dev": "set NODE_ENV=dev && node dev-server.js" Recording of a Uppsala.js user group meetup, 3 November 2016
Views: 79503 Emil Oberg
Vue.js с нуля (часть 11) - Webpack + vue-loader
 
05:13
В этом видео мы посмотрим как выносить компоненты в отдельные файлы используя Webpack, а так же как добавить в них поддержку Jade-шаблонизатора и препроцессора Sass. Это уже одиннадцатое видео из серии "Vue.js с нуля", убедитесь что не пропустили остальные - https://www.youtube.com/playlist?list=PL5r0NkdgM0UOxb4Hl81FV5UIgexwTf8h7 Код из примера - https://github.com/GitHubTochkaDev/vuejs-tutorials/tree/vue-loader Полный список зависимостей vue-loader - https://gist.github.com/freearhey/17d2d1d4590b098e80c6eb3836852fe6 Документация к webpack - http://webpack.github.io/docs/what-is-webpack.html Скринкаст по Webpack на русском языке - https://www.youtube.com/watch?v=kLMjOd-x0aQ&list=PLDyvV36pndZHfBThhg4Z0822EEG9VGenn Документация к vue-loader - http://vue-loader.vuejs.org/en/index.html Шаблонизатор Jade (Pug) - https://pugjs.org/api/getting-started.html Препроцессор Sass - http://sass-lang.com/ Музыка: Benjamin TISSOT - Dubstep (www.bensound.com)
Views: 32091 Точка.dev
Convert ES6 code to ES5 using Babel compiler
 
09:16
Convert ES6 code to ES5 using Babel compiler. Babel is a JavaScript compiler. (http://babeljs.io/) Requirement : You have latest version of node and npm. Any editor like Atom, visual studio code etc. Steps : 1.Create a directory called 'Demo' 2.Create package.json file For that we use npm npm init So open terminal and run this command 3.Create a directory called 'es6' 4.Create a directory called 'es5' 5.Create main.js file into es6 directory 6.open terminal , you can also use git bash or command line. In Visual studio code short cut key for opening terminal is ctrl+` 7.Check your node version which is latest or not. Using node -v command. If your node version not latest then download from https://nodejs.org/en/ Also check npm using npm -v command. If not latest then update using npm install [email protected] -g command. 8.Now install babel-cli and babel-preset-es2015 packages npm install babel-cli babel-preset-es2015 --save-dev 9.Create a .babelrc configuration file Add below json into it. { "presets":[ "es2015" ] } 10.When we run then we need main.js file into converted es6 to es5 into directory So we have to add scripts build section into package.json file. "scripts": { "build": "babel es6 -d es5" }, "scripts": { "build": "babel --presets es2015 es6 -d es5" } 11.Write some sample code into main.js let test='hello'; 12.build a sample code npm run build Compare both code which is same :) Now check es5/main.js , its shows converted code. You can check e6 compatibility with different browser for that use http://kangax.github.io/compat-table/es6/ Thanks for watching vedio. !
Views: 3318 karan khatri
Webpack 2 - Hot Module Replacement - CSS
 
06:27
What you will learn: - How to setup Hot Module Replacement with Webpack 2 - How to hot reload your Sass and Css in development mode Working Files Note: these files also include changes that we will do in the next video:) https://github.com/Ihatetomatoes/webpack-101-hmr-css Hit the like button and if we reach 100 likes in the first 24hrs from publishing, I will upload the next video straight away. No need to wait till next week. Thank you! THE BEST OF https://ihatetomatoes.net/the-best-of/ SUBSCRIBE https://www.youtube.com/channel/UC7O6CntQoAI-wYyJxYiqNUg?sub_confirmation=1 LET'S CONNECT! Ihatetomatoes -- https://www.facebook.com/ihatetomatoesblog/ -- http://www.google.com/+ihatetomatoes Petr Tichy -- https://plus.google.com/+PetrTichy -- http://twitter.com/ihatetomatoes -- https://codepen.io/ihatetomatoes
Views: 14839 Ihatetomatoes
Webpack tutorial for beginners in bangla |  Introduction to webpack ( part-1)
 
17:16
Webpack tutorial for beginners in bangla( part-1) | Intoduction to webpack ====================================================== What is Webpack? It's a module bundler(Individual unit of functionality) Theory discussion. I know it's boring. The idea of SPA(single page application)(React, Angular,Vue) Big Js File or Multiple small Js file ====================================================== *Big JS file - problem in maintenance and debugging *small Js file - Problem in performance and loading in order * Webpack come to rescue Load in order and compile small(module) js file into a big bundle.js file(Module Bundling) by loader -Main Function Also do other things like CSS preprocessing, image optimization, improve Performance and so many things out of the box Mastering webpack is not so easy. It requires time It's a complete series on webpack in Bangla and following topics are discussed ====================================================== 1.Introduction to webpack.Why we need it? 2.Installing webpack and configuring project files 3. Running webpack with different options 4.including CSS file inside js file and output externally 5.including Image file and management 6.code splitting and tree shaking 7.On-Demand script loading and Hashing and caching FB group link ================================================ https://www.facebook.com/groups/14967... Personal Profile ================================================= https://www.facebook.com/samim.hr
Views: 667 webdeveloper bd
Installing and using Webpack Bundle Analyzer
 
09:42
I will be showing you how to use the Webpack Bundle Analyzer plugin to identify problem areas in a webpack bundled application. I walk through the installation process, the configuration (and some reasoning behind my choices), as well as how to make your webpack build dynamic to allow for you to run it on demand as opposed to every webpack build. My Blog: https://medium.com/@angular_evan/ Twitter: http://twitter.com/angular_evan LinkedIn: https://www.linkedin.com/in/evan-williams-75485533/
Views: 961 Evan Williams
004. Inner structure of webpack bundle — Aleksey Ivanov
 
32:48
Slides: https://yadi.sk/i/ocu9Z6dr3Pa6iB Webpack is de-facto standard bundler for large frontend projects. Most developers of such projects use it, but most use it like a black box – you place your files in some place, write some magical words in config and magic happens. Until in doesn’t. I will tell how this magic works, how webpack bundle looks from inside, how different settings can change output and lead to unexpected side effects. And also how you can debug and optimize it.
Views: 416 Фронтенд
[ITA] webpack - your final module bundler - Andrea Giannantonio
 
55:43
Slide: http://jellybellydev.github.io/webpack-presentation/ RomaJS: http://romajs.org/ Meetups: http://www.meetup.com/RomaJS/ Twitter: https://twitter.com/roma_js Facebook: https://www.facebook.com/romajs.org/ Description: Webpack has quickly become one of the most popular choices among web developer builder tools. It can build, minify, split and do others awesome things to your assets. We will do a simple walk through to let you familiar with the basics of webpack and all its potential.
Views: 969 RomaJS
01 Setup React Development with Webpack
 
08:27
Option 1: https://github.com/mingzilla/intro-2-react-todo Option 2: https://github.com/gaearon/react-hot-boilerplate Play list: https://www.youtube.com/playlist?list=PLq4Evfm1RL3QgmHvi2M0MkIj0-rn6-Pqn
Views: 265 mingzillastudio
dotJS 2016 - Christophe Porteneuve - Tuning Babel to your runtimes
 
17:51
Filmed at http://2016.dotjs.io on December 5th in Paris. More talks on http://thedotpost.com Babel is amazing, and we all use it to get the latest language goodies now, but we tend to use an all-or-nothing, sledgehammer approach to it. In this talk Christophe shows how to tweak your Babel settings to tailor its level of code transformation to the native support your runtimes offer.
Views: 628 dotconferences
Node.js - Konfigracja Babel.js (Moduły ES6)
 
04:52
Wykorzystanie nowych funkcji języka standardu ECMAScript w Node.js nadal może stanowić wyzwanie - przykładem są moduły ES6 (ES6 Modules, czyli składnia import ... export ...) oraz wykorzystanie TypeScript. W tym filmie dowiesz się w jaki sposób skonfigurować kompilator Babel w projekcie Node.js. Ważne: Implementacja modułów ES6 i CommonJS różnią się od siebie. Więcej na ten temat przeczytasz tutaj: https://medium.com/the-node-js-collection/an-update-on-es6-modules-in-node-js-42c958b890c -------------------------------------- Bądź na bieżąco z Overment, znajdź mnie na: Kanale Discord: https://discordapp.com/invite/RdVgNYY Facebooku: http://www.facebook.com/overment i twitterze: https://twitter.com/_overment
Views: 641 overment
Creating Multiple Bundles for Multiple Pages with Webpack - Ep. 7
 
06:06
Typically, webpack will store our code in one big bundle which can be good because it decreases the amount of requests made to our server—however—if we’re putting everything into one file, we’re forcing the user to load excess code that the page may not need in order to function. So how do we make use of module bundling while still creating specific scripts for specific pages? The answer is having multiple entry points that compile into multiple bundles. In this tutorial, I’ll teach you exactly how to implement this using web pack. Timeline: 0:10 - Why we’d want to create multiple bundles 0:32 - Project overview 1:14 - Adding multiple entry points 2:20 - Using webpack to compile multiple bundles 3:36 - Adding bundles to our HTML 5:21 - Outro Resources: https://webpack.github.io/docs/multiple-entry-points.html Beatz: Immortal Beats - Oh Wee - Creative Commons For updates on the progress of chriscourses.com and future videos, join the Chris Courses mailing list at http://chriscourses.com. Support Chris Courses Through Patreon: -------------------------------------- https://www.patreon.com/chriscourses Chris Courses Social: --------------------- Twitter: https://twitter.com/chriscourses Facebook: https://www.facebook.com/chriscourses Instagram: https://www.instagram.com/chriscourses Christopher Lis Social: ----------------------- Twitter: https://twitter.com/christopher4lis CodePen: http://codepen.io/christopher4lis
Views: 7961 Chris Courses
Webpack Tutorial for Beginners #5 - CSS Loaders
 
07:12
Yo gang, in this Webpack tutorial for beginners, I'll introduce you to the CSS and Style loaders, which we can use to inject CSS into the parts of our application that we need it for. ----- COURSE LINKS: + Repo - https://github.com/iamshaunjp/webpack-playlist + Atom editor - https://atom.io/ + Download GIT - https://git-scm.com/ CSS Playlist - https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT HTML Playlist - https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc NODEJS Playlist - https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp --------------------------------------------------------------------------------------------- You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage... SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1 ========== PSD to WordPress Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gnow7e45LQFkNVxwQ5BH-W ============ Node.js for Beginners Playlist ============= https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp ============== The Net Ninja ===================== For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ================== Social Links ================== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk
Views: 23711 The Net Ninja
Setting up Babel and webpack to transpile ES2015 and React+JSX to browser bundle
 
09:37
OUTDATED: the "env" preset now covers es2015. First video looking at React, toobs' choice of foundation for composing its front-end components. - https://babeljs.io/learn-es2015/ - https://facebook.github.io/react/ - https://webpack.js.org/
Views: 168 James Skarzinskas
HTML & Webpack Setup - #12 - CodingWithJesse.com
 
07:04
I start work on the administration section of the website, starting with some basic HTML and webpack to bundle the JavaScript. Code here: https://github.com/jesseskinner/codingwithjesse.com/tree/part12
Views: 493 Coding with Jesse
Angular 2 with Webpack Project Setup - Part 2: TypeScript Compiler and Typings
 
12:06
How to set up a project build workflow for an Angular 2 web application from scratch using npm, TypeScript, and Webpack. In this second part we add the TypeScript Compiler (tsc) to our project and use it to compiler our TypeScript code to ES5 JavaScript. We also see how to install type definitions using Typings to fix compilation errors like "Cannot find name: 'Promise'". To start from the first part: https://www.youtube.com/playlist?list=PLgGUMhSgtxJyIQ4vI3BzlCzZLHL79Ew6p This is an extract from my "Angular 2 From The Ground Up" course. You can get early access to the full course here: http://link.encoded.io/courses/angular2?source=youtube Code snippets: https://gist.github.com/mirkonasato/5822686059d4ce4bdac83697ce7c89dc References: TypeScript Compiler Options: https://www.typescriptlang.org/docs/handbook/compiler-options.html TypeScript Declaration Files: https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html Typings (The TypeScript Definition Manager): https://www.npmjs.com/package/typings DefinitelyTyped repository: http://definitelytyped.org/
Views: 29923 Mirko Nasato
VSCode Extensions - My Top 5 Extensions
 
09:43
Useful VSCode extensions that you should have in your arsenal. 0:20 - Project Manager - https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager 2:59 - Bookmarks - https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks 4:54 - Guides - https://marketplace.visualstudio.com/items?itemName=spywhere.guides 6:57 - htmltagwrap - https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap 8:10 - Path Intellisense - https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense More useful Vscode Extensions (July 2018) https://youtu.be/UAVq1HkKZrE Want to see more VSCode and Git tips and tricks? Let me know in the comments. THE BEST OF https://ihatetomatoes.net/the-best-of/ SUBSCRIBE https://www.youtube.com/channel/UC7O6CntQoAI-wYyJxYiqNUg?sub_confirmation=1 LET'S CONNECT! Ihatetomatoes -- https://www.facebook.com/ihatetomatoesblog/ -- http://www.google.com/+ihatetomatoes Petr Tichy -- https://plus.google.com/+PetrTichy -- http://twitter.com/ihatetomatoes -- https://codepen.io/ihatetomatoes
Views: 123398 Ihatetomatoes
Setting Up ESLint
 
02:52
This video is part of the Udacity course "Web Tooling & Automation". Watch the full course at https://www.udacity.com/course/ud892
Views: 20417 Udacity
PackWars: Webpack vs Browserify vs SystemJS vs require.js – Opher Vishnia | Render 2017
 
30:05
Join us for #RenderConf 2018: https://goo.gl/iXs1mJ Slides: http://bit.ly/render2017slides Front end development is becoming increasingly complex. In the past you could just serve your CSS, JS and image files and you were good to go. Nowadays you have Single Page Apps and modules and assets and images and libraries and frameworks and oh god what now what. Let me help you with your Analysis Paralysis. I went through all the options for modularizing, bundling and serving your code so you don’t have to. I’ll explain the problem and present current solutions like Require.js, Browserify and Webpack, their use cases, their merits and their faults so you could stop worrying and start coding ABOUT OPHER VISHNIA Opher is a multidisciplinary creator, invested in many different and often unrelated fields at the same time: computer science, art, music, design, math, game development and more. For the past three years Opher has been working at Eko as lead creative developer, and the go-to authority on client side web technologies. His day-to-day involves working with both creative teams (design, art, film) as well as development teams to push the envelope of interactive video, a new and exciting creative medium.
Views: 2819 White October Events

Citalopram 10 mg teilbarkeitregeln
Ketian 25 mg zoloft
Propranolol 40 mg side effects nhs discounts
Vimax pills buy online india
5 gipfel klettersteig topamax