Django and Webpack - Using TypeScript with Django / Asset Modules for Working with Files

Published: 24 October 2022
on channel: BugBytes
2,717
75

📖 Blog: https://bugbytes.io/posts/django-and-...

In this next video, we'll learn how to use TypeScript with Django, will briefly look at how Babel compiles bleeding-edge JavaScript into a format understood by browsers, and will learn how to work with files during our Webpack build process, using asset modules.

We'll do a quick dive into TypeScript, and how you can use the ts-loader during your Webpack build to compile TypeScript down to vanilla JavaScript in your output bundles. This is necessary, as browsers do not natively understand TypeScript.

With asset modules, we'll learn how to emit files (such as images, fonts, etc) from our asset directory into our build directory, in order to deploy these files to our servers. We'll also learn that the 'asset/resource' module also exports the file URL, and you can refer to that in your asset files.

📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
00:37 Webpack Configuration Overview
01:24 TypeScript Overview and Installation
03:57 Creating TypeScript File and Defining Functions
07:49 Adding ts-loader to Webpack configuration
13:57 Babel Overview
14:45 Asset Modules for File Operations in Webpack

☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:
https://ko-fi.com/bugbytes

▶️ Full Playlist:
   • Django and Webpack - Asset Management...  

𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:
📖 Blog: https://bugbytes.io/posts/django-and-...
👾 Github: https://github.com/bugbytes-io/
🐦 Twitter:   / bugbytesio  

📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:
BugBytes blog: https://bugbytes.io/posts/django-and-...
Webpack TypeScript guide: https://webpack.js.org/guides/typescr...
Webpack Asset Modules: https://webpack.js.org/guides/asset-m...
Webpack Loaders: https://webpack.js.org/loaders/

#django #python #webpack #frontend