Snipaste_2021-07-25_18-27-24.jpg

以前的网页

image.png

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Webpack</title>
  8.     <link rel="stylesheet" href="./index.css">
  9. </head>
  10. <body>
  11.     <h1>这是一个网页</h1>
  12.     <div id="app"></div>
  14.     <script src="./index.js"></script>
  15. </body>
  16. </html>

css

body{
    background-color: antiquewhite;
}

js

const app = document.getElementById('app');

const header = document.createElement('div');
header.innerText = 'header';
app.appendChild(header);

const content = document.createElement('div');
content.innerText = 'content';
app.appendChild(content);

const footer = document.createElement('div');
footer.innerText = 'footer';
app.appendChild(footer);

后来的网页

用面向对象的想法对上面的代码进行改造

image.png

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpack</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <h1>这是一个网页</h1>
    <div id="app"></div>
    <!-- 先引入 -->
    <script src="./header.js"></script>
    <script src="./content.js"></script>
    <script src="./footer.js"></script>
    <!-- 再才能 new 创建 -->
    <script src="./index.js"></script>
</body>
</html>

index.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpack</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <h1>这是一个网页</h1>
    <div id="app"></div>
    <!-- 先引入 -->
    <script src="./header.js"></script>
    <script src="./content.js"></script>
    <script src="./footer.js"></script>
    <!-- 再才能 new 创建 -->
    <script src="./index.js"></script>
</body>
</html>

content.js

function content() {
    const content = document.createElement('div');
    content.innerText = 'content';
    app.appendChild(content);
}

footer.js

function footer() {
    const footer = document.createElement('div');
    footer.innerText = 'header';
    app.appendChild(footer);
}

header.js

function header() {
    const header = document.createElement('div');
    header.innerText = 'header';
    app.appendChild(header);
}
  1. 但是现在要加载4个JS的文件，一定会耗时更久，并且index.js看不到三个js页面都是在哪里定义的。
  2. 而且，如果js文件的引用顺序不对，错误更难以查找。

现在的网页

现在我们使用webpack来解决这些问题所以，我们需要先安装它

  1. 首先要保证你的电脑里面有npm
  2. 然后在当前目录使用npm -init -y初始化，生成 package.json文件
  3. 然后使用npm install webpack@4.41.2 webpack-cli@3.3.10 -D 安装
    使用命令后生成一个dist文件，文件夹内就是webpack帮你生成好的新的js文件
npx webpack index.js

    index.js

    // ES Module
import Header from './header.js';
import Content from './content.js';
import Footer from './footer.js';
// 更容易观察，也不要求顺序
// 如果想使用这种语法，就要使用webpack
new Header();
new Content();
new Footer();

    html

    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Webpack</title>
 <link rel="stylesheet" href="./index.css">
</head>
<body>
 <h1>这是一个网页</h1>
 <div id="app"></div>
 <!-- 先引入 -->
 <!-- <script src="./header.js"></script>
 <script src="./content.js"></script>
 <script src="./footer.js"></script> -->
 <!-- 再才能 new 创建 -->
 <script  src="./dist/main.js"></script>
</body>
</html>

    content.js header.js footer.js

    ```javascript // content function Content() { const app = document.getElementById(‘app’); const content = document.createElement(‘div’); content.innerText = ‘content’; app.appendChild(content); }

export default Content;

// header function Header() { const app = document.getElementById(‘app’); const header = document.createElement(‘div’); header.innerText = ‘header’; app.appendChild(header); } export default Header;

// footer function Footer() { const app = document.getElementById(‘app’); const footer = document.createElement(‘div’); footer.innerText = ‘footer’; app.appendChild(footer); }

export default Footer; `` 如果模块很多，有很多的文件，webpack`可以帮助我们翻译，管理文件。