zoukankan      html  css  js  c++  java

  • webpack初识别

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

    • 以下代码，是我们原始面向过程开发网页的代码（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 Module 模块引入方式， 在 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 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. 各个模块对象逻辑独立，便于维护。
    <!DOCTYPE html>
<html lang="ch">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ES Module 模块化</title>
  </head>
  <body>
    <p>ES Module 模块化</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里面
}
  • 相关阅读:
    VC++6.0调用外部dll
    VC++6.0配置Opencv
    Qt 解决中文乱码问题
    Qt Widget控件设置布局后，内部控件大小发生变化
    QtDesigner 控件自适应窗体的方法
    QtSoap调用WebService服务
    QLabel自定义类实现点击效果以及鼠标掠过字体的颜色变化效果
    VS2017中工具箱控件是灰色（不可用）解决方法
    OpenCV(3.4.1) Error: Assertion failed (size.width>0 && size.height>0) in cv::imshow, file C:uildmaster_winpack-build-win64-vc15opencvmoduleshighguisrcwindow.cpp, line 356
    OpenCV之错误集锦-1
  • 原文地址：https://www.cnblogs.com/boye-1990/p/14363083.html
Copyright © 2011-2022 走看看