webpack初识

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

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

  
    
    
    
  
  
    
面向过程网页开发
    

    
  

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

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

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

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 Module 模块引入方式， 在 index.js 中 引入 Header， SideBar， Content 对象
  2. 就是使用 import 的方式 引入 三个对象

  
    
    
    
  
  
    
面向对象网页开发
    

    
    
    
    
  

/**
 * 这是面向对象的开发方式
 * 我们将header sideBar content 单独写成了构造函数（对象）在index里面按需引入
 * 这样每个对象的逻辑可以单独去维护互不影响，更具有维护性
 *
 * 新的问题
 * 1. 加载速度变慢： 在一个index.html 引入多个js文件，加载速度会变慢（相当于多了几个http请求）
 * 2. 不易阅读看不出文件之间的相互关系： 当我打开index.js的时候 new 很多个构造函数，但是在这里我并不知道这些构造函数从哪里来，必须返回到index.html里面查看
 * 3. 不易查错（不易维护）： 多个js相互依赖，引入顺序不同可能导致报错，但是报错提示不会告诉你是引入的问题，新手很难发现问题
 *
 * 解决方案
 * 使用 ES Module 模块引入方式， 在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 Module 模块引入三个对象，并用 webpack 翻译代码，让浏览器识别 import 语句
• 存在问题
  1. 浏览器无法识别 ES Module 引入模块的方式，无法识别 import 语句
• 解决方案
  1. 使用 webpack 翻译 代码，在 index.html 中 引入 翻译好的 main.js
  2. 各个模块对象，使用 ES Module 的方式导出对象，在每个对象里面都添加获取 root Dom 的代码。index.js 中删除这行。
  3. 安装 webpack
     1. npm init esmodule(自定义包名)
     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。
  5. 版本："webpack": "^4.41.4","webpack-cli": "^3.3.10"
• 最终结果
  1. 在 index.html 文件中，我们只需要引入 1 个 js 文件，加快了页面加载速度。
  2. 在 index.js 中，我们使用 es module 的形势引入的各个模块对象，路径清晰方便阅读，解决了模块相互依赖对模块加载顺序有严格要求，容易出错的问题。
  3. 各个模块对象逻辑独立，便于维护。

  
    
    
    
  
  
    
ES Module 模块化
    

    
  

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里面
}