>[success] # 手写一个虚拟dom 渲染 ~~~ 1.通过上面的分析，对整个虚拟dom渲染有了一个大致的思路，可以做一个 简化版本的'snabbdom' 2.简化版本需要的方法 2.1'h' 函数将参数格式转换成'vnode' 对象-- 虚拟dom 3.整个手写项目将采用的webpack的打包方式，关于webpack更多的使用 可以参考我的同类章节 文件目录： ├─public │ └─ └─index.html # 打包的html 模板 ├─src # 项目源代码 │ ├─vdom # 整虚拟dom 文件目录 │ │ ├─create-element.js # 虚拟dom对象定义 │ │ ├─h.js # 将函数表达式的形式渲染成 虚拟dom │ │ ├─index.js # 我们手写的入口 │ └─ └─patch.js # ├─index.js # 打包的入口 └─webpack.config.js # webpack 配置 ~~~ >[danger] ##### webpack 配置 ~~~ const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry:'./src/index.js', // 以我们的src的index.js 作为入口进行打包 output:{ filename:'bundle.js', path:path.resolve(__dirname,'dist') }, devtool:'source-map' ,// 可以产生source-map plugins:[ new HtmlWebpackPlugin({ template:path.resolve(__dirname,'public/index.html') }) ] } ~~~ >[danger] ##### vdom 文件夹下的index.js 入口文件 ~~~ 1.导出对外一些方法 ~~~ ~~~ // 文件入口 import h from './h' import { render } from './patch' export { h, render } ~~~