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 ...
随机推荐
- solr的schema.xml配置文件关键词意义
fieldType:配置扩展的分析器analyzer:具体的分析器的全路径field:配置具体的索引业务字段name:字段的名称type:指定使用哪种分析器域:StringField,textFiel ...
- Magento 2开发教程 - 创建新模块
视频在youtube网站国内访问不了,可以使用FQ软件查看. 视频地址:www.youtube.com/embed/682p52tFcmY@autoplay=1 下面是视频文字介绍: Magento ...
- BAT的关于程序员的那些事
前言 你是否早有进入BAT公司的想法,但却因为对其不了解而在门外彷徨? 你是否想把技术团队打造成像BAT这些超级互联网公司,但却无从下手? 你是否已经进入了BAT,但是不知道如何晋升而苦恼? 那这篇文 ...
- Messenger和MVVM中的View Services
在前面的文章IoC容器和MVVM中, 介绍了IoC容器如何在大量用户类中帮助创建和分配用户类的实例.本文将介绍IoC容器如何帮助应用程序解耦,比如那些根据MVVM模式开发的应用.此模 式广泛应用在基于 ...
- What is the difference between modified duration, effective duration and duration?
Macaulay Duration (traditionally just called Duration) The formula usually used to calculate a bond' ...
- rabbitMQ windows 安装 入门(转)
rabbitMQ windows 安装 入门 1.下载,其实erlang不装也是可以的 下载 rabbitMQ :http://www.rabbitmq.com/download.html,安装r ...
- thinkphp的删除操作
1.循环遍历要删除的用户的或者呀删除的文章的id值: <volist name="list" id="vo"> <tr id="si ...
- python打开文件常见错误及解决办法
打开文件注意事项: 打开文件时需要,填写正确的路径,需要配置与文件相同的编码方式打开位机例如’utf-8‘,需要以特定 的模式打开文件 r, w,r+,w+,rb,wb,a, a+,ab等模式 f.o ...
- Python-约束和异常处理
今天我们来说一说类的规范以及程序出现错误后我们要怎么进行处理 一.类的约束 首先,你要清楚,约束是对类的约束,比如,现在你是一个项目经理,然后呢,你给手下的人分活,张三你处理一下普通用户登录,李四你处 ...
- VueJS开发所用到的技术栈
1. 主要使用vue.js2. 使用vue-cli脚手架搭建项目3. 使用vue-router来做路由,实现单页面跳转4. 使用iView UI作为前端UI框架,Mouse UI作为手机端UI框架5. ...