webpack初识别

2021-08-16 07:05:27

原始网页开发（面向过程）

以下代码，是我们原始面向过程开发网页的代码（1 个 html 文件，1 个 js 文件）
存在问题
1. 我们所有的逻辑都写在这个 index.js 中，随着逻辑越来越多，项目就会变得越来越难以维护
解决方案
1. 将 header，sidebar，content 分成 3 个对象去开发
2. 就是进阶为面向对象开发

<!DOCTYPE html>
<html lang="ch">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>这是最原始的网页开发</title>
  </head>
  <body>
    <p>面向过程网页开发</p>
    <div id="root"></div>
    <script src="./index.js"></script>
  </body>
</html>

/**
 * 这是我们最原始的网页开发方式
 * 是一种面向过程的开发，我们所有的逻辑都写在这个index.js中，随着逻辑越来越多，项目就会变得越来越难以维护
 * 所以我们就有了面向对象开发思想：我们会将 header，sidebar，content 分成3个对象去开发
 */

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

// dom.append("<div>head<div>"); // 会被转译

var header = document.createElement("div"); // 创建一个div
header.innerText = "header"; // 将这个div内容设置为 sidebar
dom.append(header); // 将这个div添加到dom里面

var sidebar = document.createElement("div"); // 创建一个div
sidebar.innerText = "sidebar"; // 将这个div内容设置为 sidebar
dom.append(sidebar); // 将这个div添加到dom里面

var content = document.createElement("div"); // 创建一个div
content.innerText = "content"; // 将这个div内容设置为 content
dom.append(content); // 将这个div添加到dom里面

进阶网页开发（面向对象）

以下代码从面向过程进阶到面向对象开发（1 个 html 文件， 4 个 js 文件）
存在问题
1. 加载速度变慢：在一个 index.html 引入多个 js 文件，加载速度会变慢（相当于多了几个 http 请求）
2. 不易阅读看不出文件之间的相互关系：当我打开 index.js 的时候 new 很多个构造函数，但是在这里我并不知道这些构造函数从哪里来，必须返回到 index.html 里面查看
3. 不易查错（不易维护）：多个 js 相互依赖，引入顺序不同可能导致报错，但是报错提示不会告诉你是引入的问题，新手很难发现问题
解决方案
1. 使用 ES Moudule 模块引入方式，在 index.js 中引入 Header， SideBar， Content 对象
2. 就是使用 import 的方式引入三个对象

<!DOCTYPE html>
<html lang="ch">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <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 sideBar content 单独写成了构造函数（对象）在index里面按需引入
 * 这样每个对象的逻辑可以单独去维护互不影响，更具有维护性
 *
 * 新的问题
 * 1. 加载速度变慢： 在一个index.html 引入多个js文件，加载速度会变慢（相当于多了几个http请求）
 * 2. 不易阅读看不出文件之间的相互关系： 当我打开index.js的时候 new 很多个构造函数，但是在这里我并不知道这些构造函数从哪里来，必须返回到index.html里面查看
 * 3. 不易查错（不易维护）： 多个js相互依赖，引入顺序不同可能导致报错，但是报错提示不会告诉你是引入的问题，新手很难发现问题
 *
 * 解决方案
 * 使用 ES Moudule 模块引入方式， 在index.js中 引入 Header， SideBar， Content对象
 * import Header from ‘./header.js‘
 * import SideBar from ‘./sidebar.js‘
 * import Content from ‘./content.js‘
 *
 * index.html 文件中只引入index.js。 问题1解决
 * 都在 index.js 引入对象，文件路径清晰，便于阅读。 问题2解决
 * 在执行 index.js 的js逻辑之前，已经加载了 3个对象的js代码，不会出现依赖文件未加载问题。问题3解决
 *
 */

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

new Header();
new SideBar();
new Content();

function Content() {
  var content = document.createElement("div"); // 创建一个div
  content.innerText = "content"; // 将这个div内容设置为 content
  dom.append(content); // 将这个div添加到dom里面
}

function Header() {
  var header = document.createElement("div"); // 创建一个div
  header.innerText = "header"; // 将这个div内容设置为 sidebar
  dom.append(header); // 将这个div添加到dom里面
}

function SideBar() {
  var sidebar = document.createElement("div"); // 创建一个div
  sidebar.innerText = "sidebar"; // 将这个div内容设置为 sidebar
  dom.append(sidebar); // 将这个div添加到dom里面
}

现代网页开发（工程化模块化）

以下代码，使用 ES Moudule 模块引入三个对象，并用 webpack 翻译代码，让浏览器识别 import 语句
存在问题
1. 浏览器无法识别 ES Moudule 引入模块的方式，无法识别 import 语句
解决方案
1. 使用 webpack 翻译代码，在 index.html 中引入翻译好的 main.js
2. 各个模块对象，使用 ES Moudule 的方式导出对象，在每个对象里面都添加获取 root Dom 的代码。index.js 中删除这行。
3. 安装 webpack
  1. npm init esmoudule(自定义包名)
  2. 一路回车使用默认配置然后会生成 package.json 文件
  3. npm install webpack webpack-cli --save-dev
4. 使用 webpack
  1. npx webpack index.js // 我用 webpack 翻译 index.js 文件
  2. 这时，你的项目目录里面多了一个 dist 文件夹，里面有一个 main.js 文件。这个文件就是 webpack 帮你翻译好的文件。
  3. 把翻译好的 main.js 替换到 index.html 中的 index.js。
最终结果
1. 在 index.html 文件中，我们只需要引入 1 个 js 文件，加快了页面加载速度。
2. 在 index.js 中，我们使用 es moudule 的形势引入的各个模块对象，路径清晰方便阅读，解决了模块相互依赖对模块加载顺序有严格要求，容易出错的问题。
3. 各个模块对象逻辑独立，便于维护。

<!DOCTYPE html>
<html lang="ch">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ES Moudule 模块化</title>
  </head>
  <body>
    <p>ES Moudule 模块化</p>
    <div id="root"></div>
    <script src="./dist/main.js"></script>
  </body>
</html>

import Header from "./header.js";
import SideBar from "./sidebar.js";
import Content from "./content.js";

new Header();
new SideBar();
new Content();

function Content() {
  var dom = document.getElementById("root");
  var content = document.createElement("div"); // 创建一个div
  content.innerText = "content"; // 将这个div内容设置为 content
  dom.append(content); // 将这个div添加到dom里面
}

function Header() {
  var dom = document.getElementById("root");
  var header = document.createElement("div"); // 创建一个div
  header.innerText = "header"; // 将这个div内容设置为 sidebar
  dom.append(header); // 将这个div添加到dom里面
}

function SideBar() {
  var dom = document.getElementById("root");
  var sidebar = document.createElement("div"); // 创建一个div
  sidebar.innerText = "sidebar"; // 将这个div内容设置为 sidebar
  dom.append(sidebar); // 将这个div添加到dom里面
}

webpack初识别

码农公寓

原始网页开发（面向过程）

进阶网页开发（面向对象）

现代网页开发（工程化模块化）

相关文章