Webpack + (Babel / TS) setup #webpack #babel #typescript #setup #tslint #standard

webpack-babel.md

Webpack + Babel

Babel

npm i @babel/polyfill
npm i -D @babel/cli @babel/core @babel/preset-env

babel.config.js

const presets = [
  ['@babel/env', {
    targets: {
      edge: '17',
      firefox: '60',
      chrome: '39',
      android: '4',
      safari: '9'
    },
    useBuiltIns: 'usage'
  }]
]

module.exports = { presets }

Webpack

npm i -D webpack webpack-cli babel-loader

webpack.config.js

module.exports = {
  entry: [
    './src/client/index.js'
  ],
  output: {
    path: __dirname,
    filename: './public/js/bundle.js'
  },
  optimization: {}, // js code minification in prod mode
  module: {
    rules: [
      {
        test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/
      }
    ]
  }
}

package.json

{
  // ...
  "scripts": {
    "build-prod": "webpack --mode production",
    "build-dev": "webpack --mode development",
  }
  // ...
}

webpack-typescript.md

Webpack + Typescript

TypeScript

npm i -D typescript tslint tslint-config-standard
npm i -D @types/node
tslint --init

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "allowJs": true
  }
}

tslint.json

{
  "defaultSeverity": "error",
  "extends": [
    "tslint-config-standard"
  ],
  "jsRules": {},
  "rules": {},
  "rulesDirectory": []
}

Webpack

npm i -D webpack webpack-cli ts-loader 

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

VSCode

tasks.json

tasks.json format

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": [
        "$tsc"
      ],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

See also

• TypeScript