Previous Step

Configure Project

We will go over the configuration files, which will be used to compile and bundle our solution into a single javascript file.

Update the Project Configuration

We will update the project's configuration (package.json) file, which was created in the previous step. First, we will update the "main" entry point. This file will be created in a future step. Next, find the "scripts" property and define the build and prod commands, to execute webpack to bundle the solution. The build command will bundle the raw JS, so we can debug the code. The prod command will minify the output.

"main": "src/index.ts",
"scripts": {
  "all": "npm run build && npm run prod",
  "build": "webpack --mode=development",
  "prod": "webpack --mode=production",
  "serve": "webpack serve"
}

Create the Configuration Files

TypeScript

Refer to typescript's documentation for an overview of the configuration file. In VS Code, create a file called tsconfig.json in the root folder.

{
    "compilerOptions": {
        "target": "es5",
        "lib": [
            "dom",
            "es2015"
        ]
    },
    "include": [
        "src/**/*"
    ]
}

Webpack

Refer to webpack's documentation for an overview of the configuration file. In VS Code, create a file called webpack.config.js in the root folder. We will reference the package.json file to reference the project name for the output file name and main source for the entry point.

var project = require("./package.json");
var path = require("path");
var { VueLoaderPlugin } = require("vue-loader");

// Return the configuration
module.exports = (env, argv) => {
    return {
        // Set the main source as the entry point
        entry: path.resolve(__dirname, project.main),

        // Output location
        output: {
            path: path.resolve(__dirname, "dist"),
            filename: project.name + (argv.mode === "production" ? ".min" : "") + ".js"
        },

        // Resolve the file names
        resolve: {
            extensions: [".js", ".css", ".scss", ".ts", ".vue"]
        },

        // Dev Server
        devServer: {
            inline: true,
            hot: true,
            open: true,
            publicPath: "/dist/"
        },

        // Plugins
        plugins: [
            new VueLoaderPlugin()
        ],

        // Loaders
        module: {
            rules: [
                // SASS to JavaScript
                {
                    // Target the sass and css files
                    test: /\.s?css$/,
                    // Define the compiler to use
                    use: [
                        // Create style nodes from the CommonJS code
                        { loader: "style-loader" },
                        // Translate css to CommonJS
                        { loader: "css-loader" },
                        // Compile sass to css
                        { loader: "sass-loader" }
                    ]
                },
                // TypeScript to JavaScript
                {
                    // Target TypeScript files
                    test: /\.tsx?$/,
                    exclude: /node_modules/,
                    use: [
                        // JavaScript (ES5) -> JavaScript (Current)
                        {
                            loader: "babel-loader",
                            options: { presets: ["@babel/preset-env"] }
                        },
                        // TypeScript -> JavaScript (ES5)
                        { loader: "ts-loader" }
                    ]
                },
                // VueJS
                {
                    // Target VueJS files
                    test: /\.vue$/,
                    // Vue Template -> JavaScript
                    loader: "vue-loader"
                }
            ]
        }
    };
}

Next Step