1搭建环境配置

必须按照webpack@5

yarn add webpack@5 webpack-cli@3 webpack-dev-server@3 html-webpack-plugin -D

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //引入
module.exports = {
  entry: path.resolve(__dirname, "src/index.js"), // 打包入口文件绝对路径
  output: {
    path: path.resolve(__dirname, "build"), // 输出文件夹绝对路径 D:\00code\11webpack\build
    filename: "js/built.js", //输出文件名
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },

  // 插件配置 下载=》引入=》使用
  plugins: [
    // new HtmlWebpackPlugin()  默认会创建一个空基本结构的html文件，自动引入打包输出（bundle也就是output输出的filename）后的所有资源
    new HtmlWebpackPlugin({
      filename: "index.html", //指定生成html文件名，默认是index.html
      template: path.resolve(__dirname, "src/index.html"), //全盘复制./src/index.html里面所有内容（指定模板页面），并且自动引入打包输出（bundle也就是output输出的filename）后的所有资源
    }),
  ],
  
  devServer: {
    contentBase: path.resolve(__dirname, "build"), //项目构建后的路径
    open: true, //自动打开浏览器
    port: 4000, //端口
    compress: true, //启动gzip压缩
  },
  //模式
  mode: "development", //development production
};

 

 官网例子跑通

 

 

import { init } from 'snabbdom/init'
import { classModule } from 'snabbdom/modules/class'
import { propsModule } from 'snabbdom/modules/props'
import { styleModule } from 'snabbdom/modules/style'
import { eventListenersModule } from 'snabbdom/modules/eventlisteners'
import { h } from 'snabbdom/h' // helper function for creating vnodes

var patch = init([ // Init patch function with chosen modules
  classModule, // makes it easy to toggle classes
  propsModule, // for setting properties on DOM elements
  styleModule, // handles styling on elements with support for animations
  eventListenersModule, // attaches event listeners
])

var container = document.getElementById('container')

var vnode = h('div#container.two.classes', { on: { click: function(){console.log('old vnode')} } }, [
  h('span', { style: { fontWeight: 'bold' } }, 'This is bold'),
  ' and this is just normal text',
  h('a', { props: { href: '/foo' } }, 'I\'ll take you places!')
])
// Patch into empty DOM element – this modifies the DOM as a side effect
patch(container, vnode)

var newVnode = h('div#container.two.classes', { on: { click: function(){console.log('new vnode')} } }, [
  h('span', { style: { fontWeight: 'normal', fontStyle: 'italic' } }, 'new~~~~This is now italic type'),
  ' and this is still just normal text',
  h('a', { props: { href: '/bar' } }, 'new~~~~I\'ll take you places!')
])
// Second `patch` invocation
patch(vnode, newVnode) // Snabbdom efficiently updates the old view to the new state