Question

webpack是打包工具，用于打包前端项目，以下只是简单说明下如何安装和使用，建议直接去webpack官网阅读。

1.初始化目录

我们先创建一个目录:Webpack，然后进入到这个目录 输入以下命令：

npm init -y

2.安装依赖

npm install webpack webpack-cli html-webpack-plugin -D

3.安装mxdraw库

npm install mxdraw

4.创建src目录，并创建一个index.js文件

import { loadCoreCode, MxFun } from "mxdraw"

const createCanvas = (id) => {
    const div = document.createElement("div")
    const canvas = document.createElement("canvas")
    // 父级必须是固定高度（不能用百分比单位），宽度可以用100% 但是一定要设置
    div.style.height = "90vh"
    div.style.width = "100%"
    canvas.id = id
    div.appendChild(canvas)
    document.body.appendChild(div)
}

loadCoreCode().then(()=> {
    const canvasId = "mxcad"
    createCanvas(canvasId)
    MxFun.createMxObject({
        canvasId,
        cadFile: "./demo/buf/hhhh.dwg"
    })
})

5.配置webpack

创建一个webpack.config.js文件:

const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    mode: process.env.development === "development" ? "development" : "production",
    plugins: [
        new HtmlWebpackPlugin({
            title: "use mxdraw webpack v5"
        })
    ],
    performance: {
        hints: false,
    },
}

6.运行

在命令行输入:

npx webpack serve

这时就可能会提示你

[webpack-cli] For using 'serve' command you need to install: 'webpack-dev-server' package.

[webpack-cli] Would you like to install 'webpack-dev-server' package? (That will run 'npm install -D webpack-dev-server') (Y/n)

这时直接输入: Y 然后按下回车键，就会自动下载对应版本的webpack-dev-server 依赖， 然后自动运行项目。

7.打包

输入命令:

npx webpack

打包后可以在dist目录看见打包后的结果，完整示例代码:点击查看(下载)