Evening Talk

Webpack, TypeScript

Webpack

Configuration

$ npm i webpack webpack-cli
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },

  mode: 'development'
}

Running

$ webpack
// index.js
import { someLog } from './some';

console.log('Run index.js');

someLog();


// some.js
export function someLog() {
  console.log('log from some.js');
}

Loaders

$ npm i css-loader style-loader ts-loader
// inside config
...

 module: {
  rules: [
   {
    test: /\.css$/,
    use: ['style-loader','css-loader']
   } 
  ]
 }
...

Plugins

$ npm i html-webpack-plugin
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// inside config
...
plugins: [
  new MiniCssExtractPlugin({
    filename: '[name].css',
    chunkFilename: '[id].css',
  }),
  new webpack.DefinePlugin({
    SOME_VALUE: JSON.stringify("some value from plugin"),
    BOOL_VALUE: true
  })
]
...

Dev server

$ npm i webpack-dev-server
// inside config
...

devServer: {
  hot: true
}
...
$ webpack-dev-server

TypeScript

  • Open source language by Microsoft
  • Superset of JS
  • Rapidly becoming Standard
  • Checks type (but types are optional)

Pros and cons

  • Improves code readability
  • Makes refactoring easy
  • Better than documentation
  • Static analysis
    • IDE support
    • Detection of mistakes
  • Well supported
  • More verbose
  • Delay in developing high-end features

Links:

Webpack, TypeScript, Angular CLI

By Anton Bely

Made with Slides.com

Webpack, TypeScript, Angular CLI

  • 1,570

More from Anton Bely