Konfiguracja webpacka dla projektu say hello

W świecie w którym aplikacje javascriptowe rozrastają się w zawrotnym tempie i posiadają coraz więcej zależności, trudno jest poradzić sobie bez dodatkowych narzędzi. W tym artykule postaram się przybliżyć narzędzie o nazwie webpack, bez którego ciężko jest obecnie wyobrazić sobie aplikacje frontendowe i nietylko.

Aloha! (hawajski, cześć)

Dla tych co może nie wiedzą, webpack jest to „module bundler”. W praktyce oznacza to tyle, że jest to narzędzie wykorzystywane do pakowania modułów z ich zależnościami (bundles) i generowania statycznych reprezentacji tych modułów. Dzięki webpackowi możemy scalić nasze moduły i utworzyć jeden plik, np js.

W projekcie użyłem webpacka w wersji 2, wersja pierwsza wg oficjalnej dokumentacji jest już deprecated. Poniżej moja konfiguracja webpacka na początku powstawania projektu.

var path = require("path");
var webpack = require("webpack");
var BrowserSyncPlugin = require("browser-sync-webpack-plugin");

module.exports = {
    context: __dirname + "/",
    entry: {
        app: ["./src/index.tsx"]
    },
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "build")
    },
    devtool: "source-map",
    resolve: {
        extensions: [
            ".webpack.js",
            ".web.js",
            ".ts",
            ".tsx",
            ".js"
        ]
    },
    module: {
        rules: [
            {
                test: /\.ts(x)?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "babel-loader"
                    },
                    {
                        loader: "ts-loader"
                    }
                ]
            },

            {
                test: /\.js$/,
                enforce: "pre",
                use: [
                    {
                        loader: "babel-loader"
                    }
                ]
            }
        ]
    },

    plugins: [
        new webpack.LoaderOptionsPlugin({
            minimize: true
        }),
        new BrowserSyncPlugin({
            host: 'localhost',
            port: 8080,
            server: {
                baseDir: './'
            },
            ui: false,
            online: false,
            notify: false
        })
    ],
};

Poza podstawowymi parametrami musiałem dodać ts-loader, ponieważ postawnowiłem wykorzystać w projekcie TypeScript, a dzięki temu loaderowi mogę transpilować kod do postaci ES5.

Dodałem także Browser sync plugin dzięki, któremu mam live reload mojej aplikacji, czyli strona w przeglądarce przeładowuje się bez konieczności odświeżania. Tak naprawdę powyższy plugin ułatwia konfigurację BrowserSynca w webpacku. Po więcej informacji odsyłam do dokumentacji synca i pluginu

0

Zostaw komentarz