Webpack概念_webpack 意义-CSDN博客

本文链接：https://blog.csdn.net/hjc256/article/details/100067174

文章目录

引入
概念

引入

<!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以及其引入的其他三个文件打包成一个浏览器可以理解的文件。

在命令行中进入代码目录，输入：

npx webpack index.js

然后就会发现在目录下新建了一个dist文件夹，文件夹内有一个main.js这就是打包后的代码，直接在页面中引入这个main.js文件即可。

概念

说了那么多，那Webpack究竟是什么呢？谷歌上的搜索结果如下：

webpack is a module bundler.

是的，可能我们认为Webpack类似于一个翻译器，可实际上它是一个打包工具。

它只认识import、export这些导入导出语句，所以说它是一个翻译器是言过其实。

它除了能够打包JS文件，还可以打包CSS和图片等文件。