跳至主要内容

文档

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 配置

要配置 Webpack 将 app/index.js 编译成 dist/bundle.js，请创建文件 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 样式已应用到您的页面。如果捆绑成功，页面顶部应该会弹出一个通知，并且按钮应该在悬停时显示一条消息。