Webpack

您可以使用Webpack在项目中包含和捆绑UIkit的JavaScript。

文件结构

对于基本项目设置，我们将创建以下文件:

app/
    index.js
index.html
package.json

以下命令将创建并填充 package.json文件。它包含Yarn的依赖项。我们包括UIkit和Webpack。

mkdir uikit-webpack && cd uikit-webpack
yarn init -y
yarn add uikit
yarn add --dev webpack

作为项目JavaScript的入口文件，创建一个包含以下内容的文件 app/index.js。

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

// 加载图标插件
UIkit.use(Icons);

// 可以从导入的UIkit引用调用组件
UIkit.notification('Hello world.');

这样就可以获得对UIkit的引用，而不必在HTML中包含其JavaScript文件。相反，我们可以包含将由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 # 从本地项目安装运行webpack
.\node_modules\.bin\webpack # 在Windows上运行webpack
webpack # 假设您在全局内安装了webpack

这样就完成了项目的基本设置。在浏览器中导航至 index.html ，并确认基本的UIkit样式已应用于您的页面。如果捆绑成功，则应该在页面顶部弹出一个通知，并且该按钮应在悬停时显示一条消息。

上一篇： Javascript

下一篇： Custom-icons

# Webpack 您可以使用Webpack在项目中包含和捆绑UIkit的JavaScript。 *** ## File structure-文件结构对于基本项目设置，我们将创建以下文件: ```html app/ index.js index.html package.json ``` 以下命令将创建并填充 `package.json`文件。它包含Yarn的依赖项。我们包括UIkit和Webpack。 ```sh mkdir uikit-webpack && cd uikit-webpack yarn init -y yarn add uikit yarn add --dev webpack ``` 作为项目JavaScript的入口文件，创建一个包含以下内容的文件 `app/index.js`。 ```js import UIkit from 'uikit'; import Icons from 'uikit/dist/js/uikit-icons'; // 加载图标插件 UIkit.use(Icons); // 可以从导入的UIkit引用调用组件 UIkit.notification('Hello world.'); ``` 这样就可以获得对UIkit的引用，而不必在HTML中包含其JavaScript文件。相反，我们可以包含将由Webpack创建的完整捆绑包。创建具有以下内容的主HTML文件 `index.html` 。 ```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](less.md) 文件并包含编译后的CSS。 ## Webpack config-Webpack 配置要配置Webpack将 `app/index.js` 编译为 `dist/bundle.js`, 请创建包含以下内容的文件 `webpack.config.js` 。 ```js var path = require('path'); module.exports = { entry: './app/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } }; ``` 现在，在项目的主目录中运行Webpack。 ```sh ./node_modules/.bin/webpack # 从本地项目安装运行webpack .\node_modules\.bin\webpack # 在Windows上运行webpack webpack # 假设您在全局内安装了webpack ``` 这样就完成了项目的基本设置。在浏览器中导航至 `index.html` ，并确认基本的UIkit样式已应用于您的页面。如果捆绑成功，则应该在页面顶部弹出一个通知，并且该按钮应在悬停时显示一条消息。

文档

Webpack

文件结构

Webpack 配置

webpack.md