Webpack概念

深碍√TFBOYSˉ_ 2024-04-17 06:01 57阅读 0赞

### 文章目录 ###

*  引入
 *  概念

# 引入 #

<!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>Test</title>
    </head>
    <body>
        <div id='root'></div>
        <script src='./index.js'></script>
    </body>
    </html>

**index.js：**

const container = document.getElementById('root');
    const fragment = document.createDocumentFragment();
    
    const header = document.createElement('header');
    header.innerText = '这是header';
    fragment.appendChild(header);
    
    const content = document.createElement('div');
    content.innerText = '这是content';
    fragment.appendChild(content);
    
    const footer = document.createElement('footer');
    footer.innerText = '这是footer';
    fragment.appendChild(footer);
    
    container.appendChild(fragment);

以上就是一个非常简单的页面，通过JavaScript来渲染页面内容。

可以看出，仅仅是一个非常简单的页面，`index.js`内就需要写不少的代码。不难想见，一旦项目规模很大，那么这种面向过程的代码就会变得完全不可维护。

--------------------

于是人们又想出了面向对象，我们对上面的代码进行一下面向对象的改造。

...
    <script src='./header.js'></script>
    <script src='./content.js'></script>
    <script src='./footer.js'></script>
    <script src='./index.js'></script>

把`header`、`content`和`footer`拆分出来形成三个独立的文件。

**header.js：**

function Header(text, container){
        
        const header = document.createElement('header');
        header.innerText = text;
        container.appendChild(header);
    }

其他两个文件同上，那么在`index.js`中，代码量就可以大幅缩减：

const container = document.getElementById('root');
    
    new Header('这是header', container);
    new Content('这是content', container);
    new Footer('这是Footer', container);

可以想见，面向对象的编写方式大幅提升代码的复用性和可维护性，使得代码更精简、更易读。

但是这样做存在几个问题，首先就是性能问题。我们在html文件中多引入了3个文件，这就意味着在网页加载时需要多出三个http请求，会导致网页加载时间变长。

其次，我们在`index.js`里不能直接看出`Header`等类定义在哪个文件中，必须打开html才能知道文件的结构。

最后，这样的写法对于文件加载的先后顺序有要求，如果把`index.js`的引入放在第一个那么就无法显示出任何内容。

--------------------

对于解决这个问题，我们可能会想到使用ES6的`import`、`export`语法来解决。

**index.js：**

import Header from './header.js';
    import Content from './content.js';
    import Footer from './footer.js';
    
    ...

然后在html中依然只需要引入`index.js`即可。这样似乎把之前提到的问题都解决了，但是这有一个致命的问题–浏览器不支持。

是的，浏览器是不支持`import`、`export`的语法。

于是就轮到Webpack大显身手了。

Webpack可以帮助我们将`index.js`以及其引入的其他三个文件打包成一个浏览器可以理解的文件。