Webpack & TypeScript Setup #7 - Wrap Up
Skills:
Frontend Performance70%
Key Takeaways
Sets up Webpack and TypeScript for frontend engineering
Full Transcript
okay then gang so that is pretty much it as far as this short series goes there is one quick thing I'd like to show you and that's this thing right here it's currently complaining that no mode option has been set on our web pack file and we can combat that by giving it a mode and this could be either that we're in production or development so in our case I'm just gonna say during development but if we were building this for production we could set this to production instead at the minute it doesn't really matter for us because we're just in development but what this does is first of all get rid of this warning and secondly it allows web pack to set certain optimizations for different modes now I'm not going to go into any great depth about this right now because that would take me a while but I will leave a link to this article or this instruction on the web pack documentation all about modes and the different things that each mode does so that link is going to be down below but hopefully now you'll see how web pack can help us to set up a nice development workflow for when we're using typescript now I am going to believe in this web pack file open guilt so you can grab it and use it for your personal projects or change it to your liking the link to that is going to be or right down in the description below but there's also much much more you can do with web pack as well so I would definitely go ahead and check out the documentation for more features and loaders that you can use in your web pack configuration we can use things like style and sass loaders for working with styles or JSON loaders for working with JSON files you can even use loaders in web platform L and template files so there's loads of things you can do with web pack and in the future I may also do more small play lists on web pack with different loaders and different setups so stay tuned for those and if you did want to learn a little bit more about typescript in general I've got a whole playlist all about typescript from the ground up on this very channel that link is gonna be down below as well so the my friends I really really hope you've enjoyed this series and if you have enjoyed it please don't forget to share subscribe and like that really means a lot and it helps out an enormous amount and if you do want to join the cause and support the channel you can do by clicking the join button on the channel homepage or underneath the video or right down below you also get a little cool ninja badge next to your name in the comments Villa and its 99 pence or cents per month and I've also created several premium in-depth courses on udemy so the first one is modern JavaScript the second one is d3 and firebase and the third one is of UJS and firebase so if you want to take one of those all the links with the discounts automatically applied to them are going to be in the video description down below so again thanks so much for watching and I'm going to see you in the very next course [Music]
Original Description
Webpack Modes - https://webpack.js.org/configuration/mode/
Final config file on github - https://github.com/iamshaunjp/webpack-and-typescript/blob/lesson-6/webpack.config.js
🐱👤🐱👤 JOIN THE GANG -
https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/join
----------------------------------------
🐱💻 🐱💻 My Udemy Courses:
+ Modern JavaScript - https://www.thenetninja.co.uk/udemy/modern-javascript
+ Vue JS & Firebase - http://www.thenetninja.co.uk/udemy/vue-and-firebase
+ D3.js & Firebase - https://www.thenetninja.co.uk/udemy/d3-and-firebase
🐱💻 🐱💻 Course Files:
https://github.com/iamshaunjp/webpack-and-typescript
🐱💻 🐱💻 Other Related Free Courses:
+ HTML & CSS Crash Course - https://www.youtube.com/playlist?list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G
+ Modern JavaScript - https://www.youtube.com/playlist?list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc
+ TypeScript Tutorial - https://www.youtube.com/playlist?list=PL4cUxeGkcC9gUgr39Q_yD6v-bSyMwKPUI
🐱💻 🐱💻 TypeScript Docs:
https://www.typescriptlang.org/docs/home.html
🐱💻 🐱💻 The Net Ninja Community Boards:
https://community.thenetninja.co.uk/
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from Net Ninja · Net Ninja · 0 of 60
← Previous
Next →
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Regular Expressions (RegEx) Tutorial #14 - Matching a Username
Net Ninja
Regular Expressions (RegEx) Tutorial #15 - Email RegEx Pattern
Net Ninja
Regular Expressions (RegEx) Tutorial #16 - Finishing Touches
Net Ninja
GraphQL Tutorial #1 - Introduction to GraphQL
Net Ninja
GraphQL Tutorial #2 - A Birdseye View of GraphQL
Net Ninja
GraphQL Tutorial #3 - Project (stack) Overview
Net Ninja
GraphQL Tutorial #4 - Making Queries (front-end preview)
Net Ninja
GraphQL Tutorial #5 - Express App Setup
Net Ninja
GraphQL Tutorial #6 - Setting up GraphQL
Net Ninja
GraphQL Tutorial #7 - GraphQL Schema
Net Ninja
GraphQL Tutorial #8 - Root Query
Net Ninja
GraphQL Tutorial #9 - The Resolve Function
Net Ninja
GraphQL Tutorial #10 - Testing Queries in Graphiql
Net Ninja
GraphQL Tutorial #11 - GraphQL ID Type
Net Ninja
GraphQL Tutorial #12 - Author Type
Net Ninja
GraphQL Tutorial #13 - Type Relations
Net Ninja
GraphQL Tutorial #14 - GraphQL Lists
Net Ninja
GraphQL Tutorial #15 - More on Root Queries
Net Ninja
GraphQL Tutorial #16 - Connecting to mLab
Net Ninja
GraphQL Tutorial #17 - Mongoose Models
Net Ninja
GraphQL Tutorial #18 - Mutations
Net Ninja
GraphQL Tutorial #19 - More on Mutations
Net Ninja
GraphQL Tutorial #20 - Updating the Resolve Functions
Net Ninja
GraphQL Tutorial #21 - GraphQL NonNull
Net Ninja
GraphQL Tutorial #22 - Adding a Front-end
Net Ninja
GraphQL Tutorial #23 - Create React App
Net Ninja
GraphQL Tutorial #24 - Book List Component
Net Ninja
GraphQL Tutorial #25 - Apollo Client Setup
Net Ninja
GraphQL Tutorial #26 - Making Queries from React
Net Ninja
GraphQL Tutorial #27 - Rendering Data in a Component
Net Ninja
GraphQL Tutorial #28 - Add Book Component
Net Ninja
GraphQL Tutorial #29 - External Query File
Net Ninja
GraphQL Tutorial #30 - Updating Component State
Net Ninja
GraphQL Tutorial #31 - Composing Queries
Net Ninja
GraphQL Tutorial #32 - query variables
Net Ninja
GraphQL Tutorial #33 - Re-fetching Queries
Net Ninja
GraphQL Tutorial #34 - Book Details Component
Net Ninja
GraphQL Tutorial #36 - Styling the App
Net Ninja
GraphQL Tutorial #35 - Making a Single Query
Net Ninja
Build Apps with Vue & Firebase - Udemy Course
Net Ninja
Updated Vue & Firebase Course (Udemy)
Net Ninja
Vue & Firebase Real-time Chat (Preview) #1 - Intro
Net Ninja
Vue & Firebase Real-time Chat (Preview) #2 - Project Structure
Net Ninja
Vue & Firebase Real-time Chat (Preview) #3 - Firestore Setup
Net Ninja
Vue & Firebase Real-time Chat (Preview) #4 - Welcome Screen
Net Ninja
Vue & Firebase Real-time Chat (Preview) #5 - Props in Routes
Net Ninja
Vue & Firebase Real-time Chat (Preview) #6 - Route Guards
Net Ninja
Vue & Firebase Real-time Chat (Preview) #7 - Chat Window
Net Ninja
Vue & Firebase Real-time Chat (Preview) #8 - New Message Component
Net Ninja
Object Oriented JavaScript Tutorial #1 - Introduction
Net Ninja
Object Oriented JavaScript Tutorial #2 - Object Literals
Net Ninja
Object Oriented JavaScript Tutorial #3 - Updating Properties
Net Ninja
Object Oriented JavaScript Tutorial #4 - Classes
Net Ninja
Object Oriented JavaScript Tutorial #5 - Class Constructors
Net Ninja
Object Oriented JavaScript Tutorial #6 - Class Methods
Net Ninja
Object Oriented JavaScript Tutorial #7 - Method Chaining
Net Ninja
Object Oriented JavaScript Tutorial #8 - Class Inheritance
Net Ninja
Object Oriented JavaScript Tutorial #9 - Constructors (under the hood)
Net Ninja
Object Oriented JavaScript Tutorial #10 - Prototype
Net Ninja
Object Oriented JavaScript Tutorial #11 - Prototype Inheritance
Net Ninja
More on: Frontend Performance
View skill →Related Reads
📰
📰
📰
📰
The Enter key that submits your form while a Japanese user is still typing
Dev.to · greymoth
The two-Reacts bug: when packages aren't singletons
Dev.to · r9v
🚀 Introducing Prism Guard — An Open Source Frontend Architecture Intelligence Platform
Dev.to · Ritumoni Sarma
The Death of the Heavy Hydration Layer
Dev.to · Amodit Jha
🎓
Tutor Explanation
DeepCamp AI