Webpack概念
文章目录
- 引入
- 概念
引入
<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>Testtitle>
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和图片等文件。