JavaScript: Webpack i TypeScript podstawowa konfiguracja

Żeby stworzyć podstawową konfigurację w Webpack, do obsługi TypeScript wystarczy:

Instalowanie zależności

Tworzymy plik package.json:

npm init

Następnie instalujemy Webpack:

npm i --save-dev webpack webpack-cli

Kolejny krok instalacja TypeScripta:

npm install --save-dev typescript ts-loader

Dodajemy HTML Webpack plugin:

npm i --save-dev html-webpack-plugin

Ten plugin sprawi, że stworzy dla nas z automatu plik index.html. Więcej o tym trochę później.

Na koniec zainstalujmy jeszcze Webpack dev server. To pomocne narzędzie do automatycznego przeładowania aplikacji, w momencie zmiany kodu:

npm install --save-dev webpack-dev-server

Konfiguracja

Zabieramy się za konfigurację.

Stwórz plik o nazwie: tsconfig.json:

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

To jest plik konfiguracyjny dla compilera TypeScript.

Stwórz plik o nazwie: webpack.config.js i dodaj:

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

module.exports = {
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
    devServer: {
        static: './src',
        hot: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'My App',
        }),
    ],
};

Pole entry określa plik napisany, w TypeScript. W taki sposób informujemy Webpack skąd, ma pobrać kod źródłowy naszej aplikacji. W output podajemy nazwę pliku filename, jaką ma mieć przekompilowany kod. devServer tutaj powiadamiamy Webpack dev server miejsce (static), jakie ma nasłuchiwać podczas ewentualnych zmian kodu. hot ustawione na true sprawi, że po zapisie zmiany w kodzie aplikacja zostanie przeładowana automatycznie.

Dodaliśmy jeszcze plugin: HtmlWebpackPlugin stworzy dla nas automatycznie plik: index.html.

Skrypty

Na koniec konfiguracji dodajmy do pliku package.json do sekcji scripts dodajemy takie polecenia:

"scripts": {
    "dev": "webpack --mode=development",
    "build": "webpack --mode=production",
    "serve": "webpack-dev-server --open --mode=development --config webpack.config.js"
}

Skrypt build przekompiluje nam kod do zminimalizowanej wersji.

Skrypt dev stworzy wersję deweloperską.

Z kolei serve uruchomi Webpacka działającego w tle i nasłuchującego na ewentualne zmiany w kodzie.

Przykład

Teraz czas to wypróbować. Stwórz katalog: src a w nim takie pliki:

foo.ts:

export const foo = () => {
    console.log('Foo call!');
};

index.ts:

import { foo } from './foo';

foo();

Następnie uruchom skrypt:

npm run dev 

Zostanie stworzony katalog dist i plik index.js. Sprawdź zawartość tego pliku.

Uruchom skrypt:

npm run build 

Ponownie zajrzyj do pliku w dist/index.js.

Ostatni skrypt:

npm run serve 

Zostanie uruchomiona aplikacja, w przeglądarce.

Zmień kod w katalogu: src dowolny plik. Po zapisie kod zostanie przekompilowany. Jeśli coś zmienisz i zapiszesz te zmiany, aplikacja zostanie przeładowana także w przeglądarce.