Webpack Academy #BONUS: Use webpack with Typescript, Vuejs & Sass

A little bonus for people that follows my webpack academy course!

I will show you how to add typescript with vuejs2 and Sass!

I will divide this article into 3 parts! You can only follow the first if you need to add only typescript into your project!

Add typescript

For adding typescript we will need to add a loader and install some dependencies!

We will install ts-loader that will handling .ts file!

We need to add tsconfig.json (ts-loader will use it for transpiling ts file into js file).

After this we will remove all file in our src/ in order to add index.ts (expect html file).

We need to use ts-loader in our webpack config!

    module: {
        rules: [{
            test: /\.tsx?$/,
            loader: "ts-loader",
            exclude: /node_modules/,
        }]
    },

Alias typescript & webpack

If you use alias in webpack, you need to do the same alias for tsconfig file!

webpack.config

    resolve: {
        alias: {
            '@': path.resolve(__dirname, "./src/"),
        }
    },

tsconfig.json

"paths": {
   "@/*": ["./src/*"]
},

You can check all changes from this

Add vuejs 2

So now we will install vue2! We will add the vue-loader.

We will need to install another loader, if you remember during the first academy, I explain the goal of style-loader (it inject css into the DOM). We will need to replace it (we use it only in dev mode) with vue-style-loader! (it will do the same thing but for css in vue file!)

Ok so now we need to make 4 things!

• the first is to indicate the alias of vue for webpack
• the second is linked to typescript
• the third is to add vue library as cdn
• the last is to configure vue & test!

Alias vue (vue.esm.js)

In the webpack config

'vue$': 'vue/dist/vue.esm.js',

Adapt typescript with vue file

When typescript will handle vue file, it will have some trouble! Since it's not a ts file! But we need to transpile vue file into js file!

So when we declare our ts-loader we need to add this

options: {
   // Tell to ts-loader: if you check .vue file extension, handle it like a ts file
   appendTsSuffixTo: [/\.vue$/]
}

We also need to create a file called vue-shims.d.ts, it will tell the TypeScript compiler that importing .vue files is OK. So you can import vue file without issue in .ts!

declare module "*.vue" {
    import Vue from "vue"
    export default Vue
}

Also, we need to put this file in the ts-config

    "files": [
        "./vue-shims.d.ts",
    ]

😅 We almost finish! Be brave 💪

Import vue with cdn

Go to the part dedicated to cdn in my academy if you need to know how it's working but you need to add vue cdn link for dev mode and the same but vue.min in prod mode.

Don't forget to add external property into the webpack.config

Config vuejs

We just need to configure vuejs config and we are done!

So first of all we need to create index.ts that will be the entry file of vue.

import Vue from "vue"
import App from "./app/App.vue"

Vue.config.productionTip = false

export const app = new Vue({
    el: "#app",
    render: h => h(App),
})

I prefer to split .vue to .ts, my vue file will include my style and template, the typescript file will include all component logic.

app.vue

<template>
<div class="toto">
    Hello there
</div>
</template>

<script lang="ts" src="./App.ts"></script>
<style scoped>
    .toto {
        color: blue;
    }
</style>

app.ts

import Vue from "vue"

export default Vue.extend({})

The last thing to do is to go to html file and create the div that will be used by vuejs (vue will use this div to inject its components).

As mentioned by the entry file, the id is app. So we just need to inject it into our html!

<div id="app"></div>

You can check all changes from this

SASS

You can skip vuejs part if you are only interested by SASS with webpack!

Let's add sass-loader to our project, we need to use it before handling css! Since Sass transpilers file .scss into .css!

We also need to change our regex for handling .scss file

test: /\.(sa|sc|c)ss$/,

Alias for style

I like to use alias for style files!

So we can go to it, but we need to add it to webpack config and typescript config!

After this, we can create our first .sass file.

$main-colors: #6096BA;
$hover: #45718D;
$active: #385A71;
$grey: #677681;
$light: #B7D0E1;
$black: #233947;

And use it to .vue

<style lang="scss" scoped>
    @import "~style/import.scss";
    div {
        background: $grey;
    }
</style>

Note: We also need to install sass packages!

I hope you like this BIG bonus!

I hope you like this reading!

🎁 You can get my new book Underrated skills in javascript, make the difference for FREE if you follow me on Twitter and MP me 😁

Or get it HERE

🎁 MY NEWSLETTER

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!