>[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 } ~~~