在很久很久以前，当我们写一个web网页的时候，js实现的逻辑相对是比较弱的。但随着前端技术的发展，前端能实现的内容越来越多。在js里面加了非常非常多的逻辑，于是呢，我们就发现我们通过这种面向过程的方式去写我们的代码。我们的代码就会变得非常的长。后面js里面的逻辑会被堆的越来越大，越来越大，最终变得不可维护。

这个时候我们出现了一种新的编程方式，叫做面向对象编程

index.html
<!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>
index.js
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);
改成
index.html
<!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);

}
sidebar.js
function Sidebar() {

　　var sidebar = document.createElement('div');

　　sidebar.innerText = 'sidebar';

　　dom.appendChild(sidebar);

}
content.js
function Content() {

　　var content = document.createElement('div');

　　content.innerText = 'content';

　　dom.appendChild(content);

}
index.js
var dom = document.getElementById('root');

new Header();

new Sidebar();

new Content();
这样的话就通过面向对象改造了我们的代码。使用了面向对象使我们的代码更具有维护性。为什么呢？关于header的逻辑全部放到header这个对象里。siderbar的逻辑都放在siderbar这个对象里。这样的话，每一个对象他承载的职责是固定的。那么维护起来就方便的多。比如说如果header里面有问题，原来就需要在index.js里面整篇的去查找哪里有问题。现在如果header里面有问题，只需要打开header.js去查错就可以了。
但是，，，如果我们把代码拆成这个样子，他就带来了新的问题。大家会发现在index.js里面引用了多个js文件。这样的话就会带来几个问题。首先整个页面的加载速度会变慢。因为多出了三个http请求。页面的加载速度当然会变慢。第二点，在index里面看到三个构造函数的创建，但是你并不能知道这每个构造函数对应的文件在哪里，如果你想知道这个文件在哪里的话，你必须要再回头看html文件，你才会发现原来header跟index文件在同一个目录下。所以第二点，看不出代码跟文件之间的关系。第三点很难去查错。假设我这个content.js位置放错了，放在index下面。报错位置是new Content。很难联想到是js位置放错了。所以拆成这样。代码也是不容易维护到。那为了解决这个问题，有人想出了这样一种方式.把index.html,index.js改成这样
index.html
<!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>
index.js
import Header from './header';

import Sidebar from './sidebar';

import Content from './content';

var dom = document.getElementById('root');

new Header();

new Sidebar();

new Content();
那这样写是不是能解决之前的几个问题呢？首先，index.html里只引入了一个js文件。所以他的网页运行速度会很快。第二点，文件和文件之间的依赖关系非常的明确。上面的文件颠倒顺序也不要紧，因为确保了下面引用之前，前面都加载好了。这种引入方式就叫做ES Moudle模块引入方式，跟react,vue里面非常像。
以前写vue，react都能用啊，在这里怎么就报错了呢？其实是这样的，在浏览器里，压根就不认识这样的语句，所以我们想实现我们的代码，目前来看，根据是不可能的。这个时候，webpack就登场了。虽然原生浏览器不知道import是什么意思。但是我webpack知道。webpack知道import是引入模块的意思。他可以帮浏览器做一个翻译，告诉浏览器，这其实在引入一个模块。
所以这个时候，我们可以安装一下webpack，对当前的代码做一次翻译，首先怎么安装呢，首先在命令行里面进入项目目录，运行一下
npm init 项目名
一路回车，然后
npm install webpack webpack-cli
现在在项目的根目录下已经安装好了webpack，那么接下来就是对webpack做一次翻译。怎么翻译呢？
运行一下
npx webpack index.js
他的意思是用webpack去翻译index.js这个文件。翻译过后，根目录下出现了一个dist的文件夹，dist文件夹多了一个main.js文件。这个就是webpack帮你翻译好的文件
这个时候需要把引入的index.js改成dist下面main.js。main是index经过webpack翻译的js文件。这个时候会报错还是，是因为要在要引入的文件里面导出这些文件。export default xxx。

webpack究竟是什么的更多相关文章

  1. Vue 不睡觉教程2 - 洋气的文件结构

    目标书接上回,上回那个例子实在太土了.实际开发中我们不可能把整个网站的js和html全写到一个页面上.所以我们这节课的目标在于改造这个例子的文件结构,让它不那么土Let's do it 环境参数vue ...

  2. 探索 模块打包 exports和require 与 export和import 的用法和区别

    菜单快捷导航: CommonJS 之 exports和require用法 ES6 Module 之 export 和 import 用法 CommonJS和ES6 Module的区别 循环依赖 和 解 ...

  3. webapck学习笔记

    该笔记是博主学习webpack课程时做的笔记,里面加了一些自己的一些理解,也踩了一些坑,在笔记中基本上都更正过来了,分享给大家,如果发现什么问题,望告知,非常感谢. 1. 为什么要学webapck 为 ...

  4. r.js结合gulp等于webpack（angular为例）

    本人大学时玩dojo,开始了AMD模块化的不归路,工作后一直使用requirejs,感觉非常好.但是,近来随着react的火热,webpack成为了天下无敌的模块化工具,能做模块化,合并压缩,监视等, ...

  5. 细说 webpack 之流程篇

    摘自: http://taobaofed.org/blog/2016/09/09/webpack-flow/ 引言 目前,几乎所有业务的开发构建都会用到 webpack .的确,作为模块加载和打包神器 ...

  6. 细说webpack之流程篇

    引言 目前,几乎所有业务的开发构建都会用到 webpack .的确,作为模块加载和打包神器,只需配置几个文件,加载各种 loader 就可以享受无痛流程化开发.但对于 webpack 这样一个复杂度较 ...

  7. webpack务虚扫盲

    打包工具的角色 所谓打包工具在web开发中主要解决的问题是: (1)文件依赖管理.毕竟现在都是模块化开发,打包工具首先就是要梳理文件之间的依赖关系. (2)资源加载管理.web本质就是html.js和 ...

  8. webpack的Hot Module Replacement运行机制

    使用webpack打包,难免会使用Hot Module Replacement功能,该功能能够实现修改.添加或删除前端页面中的模块代码,而且是在页面不刷新的前提下.它究竟是怎么运作的呢?本文主要从调试 ...

  9. webpack+babel项目在IE下报Promise未定义错误引出的思考

    低版本浏览器引起的问题 最近开发一个基于webpack+babel+react的项目,一般本地是在chrome浏览上面开发,chrome浏览器开发因为支持大部分新的js特性,所以一般不怎么需要poly ...

随机推荐

  1. 问题集录06--SpringBoot创建Maven项目

    1. 如下图,打开idea之后,file -> new -> project2. 如下图,在弹出的new project 页面,选择maven -> 勾选Create from ar ...

  2. Azure 项目构建 – 部署高可用的 Python Web 应用

    Python 以其优美,清晰,简单的特性在全世界广泛流行,成为最主流的编程语言之一.Azure 平台针对 Python 提供了非常完备的支持.本项目中,您将了解如何构造和部署基于 Azure Web ...

  3. jsp servlet基础复习 Part2--GET，Post请求

    最近进行servlet和jsp方面的梳理复习时,发现以前忽略了一个非常重要的知识点:get和post的请求(如果你觉得两者仅仅是提交数据量的大小以及方式不同就大错特错了)的正真区别,下面进行简答的整理 ...

  4. SpringBoot加载子模块配置文件的方法

    这两天开始学习SpringBoot框架,按照官方的文档,很轻易地就把单模块的项目启动了,但在使用maven搭建多模块的时候遇到了子模块配置文件没有加载的问题 项目架构是这样的 zero |-ws |- ...

  5. 插入排序——Python实现

    一.排序思想 排序思想参见:https://www.cnblogs.com/luomeng/p/10583124.html 二.python实现 def InsertSort(arrs): " ...

  6. php查找字符串中第一个非0的位置截取

    $str = '00000000000000000000000000000000000000001234506'; $preg = '/[0]*/'; $result = preg_replace($ ...

  7. ubuntu sudo不能用的解决办法

    输入sudo 出现 sudo: /etc/sudoers 可被任何人写 sudo: 没有找到有效的 sudoers 资源,退出 sudo: sudoers的权限被改了 pkexec chmod 044 ...

  8. 车厢调度(train.cpp)

    车厢调度(train.cpp) [问题描述]        有一个火车站,铁路如图所示,每辆火车从A驶入,再从B方向驶出,同时它的车厢可以重新组合.假设从A方向驶来的火车有n节(n<=1000) ...

  9. Python入门-函数进阶

    昨天我们简单的了解了函数的定义,调用,以及传参,其实还有一个更重要的传参:动态传参,让我们继续昨天没有说完的,以及今天我要分享的东西. 一.动态传参 之前我们说过了传参,如果我们需要给一个函数传参,而 ...

  10. 原生js、jQuery实现选项卡功能

    在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图:              好了,下边 ...