Home

Prep (optional)

1. Updated my .git/gitconfig and added my usual command aliases to work quicker with git.

git config --global alias.st status
git config --global alias.co checkout
git config --global alias.ci commit
git config --global alias.br branch

This doesn't get pushed to the repo, but my aliases are:

[alias]
    st = status
    co = checkout
    ci = commit
    br = branch

Pre-flight checks

1. Check if you have npm installed, by running the line below, you should get a version number printed to the terminal, eg: "8.1.2"

npm -v

2. If you don't have npm installed yet, then download it here and follow the steps there to install it: https://nodejs.org/en/download/

Setup - From this repo

(see "From Scratch" below)

1. git clone git@github.com:monello/webpack-sandbox.git
2. npm install

Setup - From Scratch

Git Repo

1. Create a new repo on Github
2. Checkout the repo eg. git clone git@github.com:monello/new-repo-name-goes-here.git
3. Add a .gitignore file in the root directory and add the following in it so long:

node_modules
package-lock.json
dist

NPM - package.json

1. Initialize npm - to create the package.json file. The -y flag means "Yes, set up the package.json with default values and don't ask all the set-up questions"

npm init -y

2. Add some NPM run scripts

  "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack serve --open",
        "watch": "webpack --watch",
        "build": "webpack --config webpack.config.prod.js"
    },

3. Install devDependencies

npm install --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader html-webpack-plugin

TypeScript Setup

1. Initialize the TypeScript compiler. This will create a tsconfig.json file

tsc --init

2. Open the tsconfig.json file. Set at least the following:

{
    "compilerOptions": {
        "target": "es2016",
        "module": "commonjs",
        "moduleResolution": "node",
        "allowJs": true,
        "sourceMap": true,
        "outDir": "./dist",
        "removeComments": true,
        "noEmitOnError": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "noImplicitAny": true,
        "skipLibCheck": true
    },
    "exclude": [
        "node_modules"
    ]
}

WebPack Setup

1. Create the Development WebPack config file
   1. /webpack.config.js
   2. Add the following content:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: "development",
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
    devtool: 'inline-source-map',
    devServer: {
        static: './dist',
    },
    plugins: [
        new HtmlWebpackPlugin({
            hash: true,
            title: 'Webpack TypeScript Setup',
            myPageHeader: 'Hello World - using "webpack.config.js"',
            template: './src/index.html'
        }),
    ],
};

2. Create the Production WebPack config file
   1. /webpack.config.prod.js
   2. Add the following content:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: "production",
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
    devServer: {
        static: './dist',
    },
    plugins: [
        new HtmlWebpackPlugin({
            hash: true,
            title: 'Webpack TypeScript Setup',
            myPageHeader: 'Hello World - using "webpack.config.prod.js"',
            template: './src/index.html'
        }),
    ],
};

Test the Setup

1. Add an index.html file in the ./src dir, and add something in it so view in the browser
2. Run npm start to test webpack-dev-server and it should automatically open this app in the browser and display whatever you added in the index.html.
   • Change and save what you display in the HTML file and you should see the browser auto-reload and see you update

Set-up ready

Now would be a good time to do an initial commit for the project.