webpack究竟是什么
这个时候我们出现了一种新的编程方式,叫做面向对象编程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>这是最原始的网页开发</title>
</head>
<body>
<p>这是我们的网页内容</p>
<div id="root"></div>
<script src='./index.js'></script>
</body>
</html>
var dom = document.getElementById('root');
var header = document.createElement('div');
header.innerText = 'header';
dom.appendChild(header);
var sidebar = document.createElement('div');
sidebar.innerText = 'sidebar';
dom.appendChild(sidebar);
var content = document.createElement('div');
content.innerText = 'content';
dom.appendChild(content);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>这是最原始的网页开发</title>
</head>
<body>
<p>这是我们的网页内容</p>
<div id="root"></div> <script src="./header.js"></script>
<script src="./sidebar.js"></script>
<script src="./content.js"></script>
<script src="./index.js"></script>
</body>
</html>
header.js
function Header() {
var header = document.createElement('div');
header.innerText = 'header';
dom.appendChild(header);
}
function Sidebar() {
var sidebar = document.createElement('div');
sidebar.innerText = 'sidebar';
dom.appendChild(sidebar);
}
function Content() {
var content = document.createElement('div');
content.innerText = 'content';
dom.appendChild(content);
}
var dom = document.getElementById('root');
new Header();
new Sidebar();
new Content();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>这是最原始的网页开发</title>
</head>
<body>
<p>这是我们的网页内容</p>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>
import Header from './header';
import Sidebar from './sidebar';
import Content from './content'; var dom = document.getElementById('root'); new Header();
new Sidebar();
new Content();
npm init 项目名
npm install webpack webpack-cli
npx webpack index.js
webpack究竟是什么的更多相关文章
- Vue 不睡觉教程2 - 洋气的文件结构
目标书接上回,上回那个例子实在太土了.实际开发中我们不可能把整个网站的js和html全写到一个页面上.所以我们这节课的目标在于改造这个例子的文件结构,让它不那么土Let's do it 环境参数vue ...
- 探索 模块打包 exports和require 与 export和import 的用法和区别
菜单快捷导航: CommonJS 之 exports和require用法 ES6 Module 之 export 和 import 用法 CommonJS和ES6 Module的区别 循环依赖 和 解 ...
- webapck学习笔记
该笔记是博主学习webpack课程时做的笔记,里面加了一些自己的一些理解,也踩了一些坑,在笔记中基本上都更正过来了,分享给大家,如果发现什么问题,望告知,非常感谢. 1. 为什么要学webapck 为 ...
- r.js结合gulp等于webpack(angular为例)
本人大学时玩dojo,开始了AMD模块化的不归路,工作后一直使用requirejs,感觉非常好.但是,近来随着react的火热,webpack成为了天下无敌的模块化工具,能做模块化,合并压缩,监视等, ...
- 细说 webpack 之流程篇
摘自: http://taobaofed.org/blog/2016/09/09/webpack-flow/ 引言 目前,几乎所有业务的开发构建都会用到 webpack .的确,作为模块加载和打包神器 ...
- 细说webpack之流程篇
引言 目前,几乎所有业务的开发构建都会用到 webpack .的确,作为模块加载和打包神器,只需配置几个文件,加载各种 loader 就可以享受无痛流程化开发.但对于 webpack 这样一个复杂度较 ...
- webpack务虚扫盲
打包工具的角色 所谓打包工具在web开发中主要解决的问题是: (1)文件依赖管理.毕竟现在都是模块化开发,打包工具首先就是要梳理文件之间的依赖关系. (2)资源加载管理.web本质就是html.js和 ...
- webpack的Hot Module Replacement运行机制
使用webpack打包,难免会使用Hot Module Replacement功能,该功能能够实现修改.添加或删除前端页面中的模块代码,而且是在页面不刷新的前提下.它究竟是怎么运作的呢?本文主要从调试 ...
- webpack+babel项目在IE下报Promise未定义错误引出的思考
低版本浏览器引起的问题 最近开发一个基于webpack+babel+react的项目,一般本地是在chrome浏览上面开发,chrome浏览器开发因为支持大部分新的js特性,所以一般不怎么需要poly ...
随机推荐
- 游标的小知识(转载and整理)
一.游标(用来存储多条查询数据的一种数据结构(结果集),它有一个指针,用来从上往下移动,从而达到遍历每条记录的作用) 游标也可以理解为逐行返回SQL语句的结果集 如何编写一个游标? 1.声明游标 de ...
- 插入排序——Python实现
一.排序思想 排序思想参见:https://www.cnblogs.com/luomeng/p/10583124.html 二.python实现 def InsertSort(arrs): " ...
- Docker镜像保存为文件及从文件导入镜像的方法
参考 1.概述 我们制作好镜像后,有时需要将镜像复制到另一台服务器使用. 能达到以上目的有两种方式,一种是上传镜像到仓库中(本地或公共仓库),但是另一台服务器很肯能只是与当前服务器局域网想通而没有公网 ...
- k8s常用指令集(kubectl kubeadm)
1 Kubectl指令集 1.1 Master查询节点信息 [root@master1 kubernetes-1.10]# kubectl get nodes 1.2 查 ...
- Effective C++ .08 别让异常逃离析构函数
异常不怎么用,C++能自己控制析构过程,也就有这个要求了.容器不能完全析构其中的元素真是太危险了
- spring cglib 与 jdk 动态代理
1. 概述 JDK动态代理是利用java反射机制 生成一个实现接口的匿名类, 在调用具体方法前调用InvocationHandler来处理 Cglib动态代理是 利用asm开源包 把被代理类的clas ...
- JQ中的FormData对象 ajax上传文件
HTML代码: <form enctype="multipart/form-data" method="POST" name="searchfo ...
- 教你小三角,适用移动端等,解决移动端a标签的默认样式
1.小三角,通过给一个div设置足够大的边框,让它的上边框,右边框,左边框,的背景颜色设置成透明的,来实现,如下: <!DOCTYPE html> <html> <hea ...
- IOS如何下载旧版本应用APP
前言 文章相对来说比较复杂,特别是查找版本ID对应的步骤,这里推荐使用另一种方案,操作起来更简单. 本文介绍如何使用Workflow及Fiddler下载IOS旧版本APP应用. 实现原理 通过Work ...
- 欣欣的留言板项目====超级触动的dbUtil实现留言板
留言板管理系统 我的完成效果图: 提交后: 我的留言板基本架构如图: 创建留言板数据库: 刚开始我的前台主页中写留言信息表单: <body> <h1>留言板</h1> ...