CKEditor 生态系统文档
Search
首页/CKBox/入门

指南Webpack

如果你想使用 CKBox 与 webpack，首先需要安装 ckbox 包以及必要的 webpack 包和加载器。

npm i ckbox
npm i -D webpack webpack-cli css-loader style-loader ts-loader typescript html-webpack-plugin

请参考我们的仓库中的示例以获取完整的 代码示例。

# 准备入口文件

在所需位置导入 CKBox 依赖项，并添加 CKBox 组件所需的 CSS 样式文件导入。
以下是示例入口文件的示例内容

import * as CKBox from 'ckbox';
import 'ckbox/dist/styles/ckbox.css';

const app = document.querySelector<HTMLDivElement>('#app');

if (!app) {
    throw new Error('Missing #app element');
}

CKBox.mount(app, {
    dialog: true,
    tokenUrl: 'https://your.token.url'
});

# 准备模板 HTML 文件

将以下代码片段放置在 html 模板文件内

<div id="ckbox"></div>

# 配置 webpack

要让 CKBox 运行起来，首先你需要指示 webpack 如何处理 TypeScript 文件以及如何转换样式 css 文件。使用 ts-loader 或类似的加载器将 TypeScript 编译为 JavaScript。此外，使用 style-loader + css-loader 或类似的加载器来转换 .css 文件。

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

module.exports = {
    entry: './src/main.tsx',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [new HtmlWebpackPlugin({
        template: path.resolve(__dirname, 'index.html'),
    })],
    mode: 'development',
    ...
};

请查看支持的 配置选项 列表，这些选项将帮助你配置组件。