Webpack

Webpack を使用して、UIkit の JavaScript をプロジェクトに含めてバンドルすることができます。

ファイル構造

基本的なプロジェクト設定では、次のファイルを作成します。

app/
    index.js
index.html
package.json

次のコマンドを実行すると、`package.json` ファイルが作成され、内容が設定されます。pnpm の依存関係が含まれ、UIkit と Webpack が含まれます。

mkdir uikit-webpack && cd uikit-webpack
pnpm init
pnpm add uikit
pnpm add --dev webpack

プロジェクトの JavaScript のエントリファイルとして、次の内容を含む `app/index.js` ファイルを作成します。

import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';

// loads the Icon plugin
UIkit.use(Icons);

// components can be called from the imported UIkit reference
UIkit.notification('Hello world.');

これにより、HTML に JavaScript ファイルを含めることなく、UIkit への参照を利用できます。代わりに、Webpack によって作成される完全なバンドルを含めることができます。次の内容を含むメインの HTML ファイル `index.html` を作成します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
        <link rel="stylesheet" href="node_modules/uikit/dist/css/uikit.min.css">
    </head>
    <body>

        <div class="uk-container">
            <div class="uk-card uk-card-body uk-card-primary">
                <h3 class="uk-card-title">Example headline</h3>

                <button class="uk-button uk-button-default" uk-tooltip="title: Hello World">Hover</button>
            </div>
        </div>

        <script src="dist/bundle.js"></script>
    </body>
</html>

注記簡略化のため、事前にビルドされた CSS を含めています。実際のプロジェクトでは、Less ファイルをビルドし、コンパイルされた CSS を含める方が良いでしょう。

Webpack 設定

`app/index.js` を `dist/bundle.js` にコンパイルするように Webpack を設定するには、次の内容を含む `webpack.config.js` ファイルを作成します。

var path = require('path');

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

プロジェクトのメインディレクトリで Webpack を実行します。

./node_modules/.bin/webpack # Run webpack from local project installation
.\node_modules\.bin\webpack # Run webpack on Windows
webpack # If you installed webpack globally

これで、プロジェクトの基本設定が完了しました。ブラウザで `index.html` にアクセスし、基本的な UIkit のスタイルがページに適用されていることを確認してください。バンドリングが成功すると、ページの上部に通知が表示され、ボタンにマウスを合わせるとメッセージが表示されます。

ドキュメント

Webpack

ファイル構造

Webpack 設定