虚拟DOM
本质: 用JS对象，模拟DOM元素和嵌套关系
目的: 实现页面元素的高效更新
辅助工具
- webpack
设置mode，在webpack.config.js
module.exports = {
mode: 'development',
// 在webpack 4.x中，有一个很大的特性，就是约定大鱼配置，默认的打包入口路径是src->index.js
}
- webpack-dev-server(设置端口，打开页面，热启动，打包压缩到内存)
设置package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3000 --hot --process --compress"
},
- html-webpack-plugin(html压缩到内存)
在webpack.config.js中设置plugins。
const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin') //导入在内存中自动生成index页面的插件
// 创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
template: path.join(__dirname, './src/index.html'),//源文件
filename: 'index.html' // 生成的内存中的首页的名称
})
module.exports = {
plugins: [
htmlPlugin
]
}
