代码实现虚拟dom和diff的前期工作

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

在写之前需要把前端的打包工具搞一下，使用时webpack这次我们用不了脚手架了，只能自己去配置一个webpack打包工具， 新建一个文件夹，用npm init 初始化一下（也可以用yarn或者其他工具）

我还新建一个webpack.config.js用，(可以用gulp或者其他的打包工具) 现在就需要下载依赖和配置webpack 我用到的webpack的配置依赖 比较简单(版本号也一致，不会出现版本问题，如果自己下载最新的可能会报错)

webpack.config.js的简单配置

// htmlwebpackplugin会在打包结束后，⾃动⽣成⼀个html⽂件，并把打包⽣成的js模块引⼊到该html中
const HtmlwebapckPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
    entry: './src/js/index.js', // 入口文件
    output: { // 输出文件
        // path.resolve 将路径解析未绝对路径
        path: path.resolve(__dirname,'dist'), // 输出⽂件的存放路径，必须是绝对路径
        filename: 'bundle.js' // 输入文件名字
    },
    mode: 'development', // 可以当枪构建环境
    devtool: "source-map",
    // 使用webpack插件
    plugins: [
        new HtmlwebapckPlugin({ // 他还有需要配置大家可以自己看文档
            template: path.resolve(__dirname,'src/index.html') // 模板⽂件路径
        })
    ],
    // 配置一下devserver
    devServer: { // 想要了解大家也可以自己看文档
        // static: './src', // 默认打开目录
        contentBase: './',
        open: "true",
    }
}

配置完我们可以npm run dev跑起来看一下 ok了就可以进行下一步了

实现虚拟dom的顺序是 需要把相对应的模版——>对应的虚拟dom ->初始化的对象字符串->创建dom->挂载(后面可能会修改)

模版转化这个咱们暂时先不做，直接用模拟数据做虚拟dom往后的代码。

后面更精彩