webpack究竟是什么 - 《webpack》

为什么出现
知识补全

为什么出现

首先说一下，webpack为什么要出现。

原始的网页开发其实是面向过程的，而且代码逻辑写在一个文件里面使得文件代码越来越臃肿，不方便维护。
为了解决维护的问题，页面开始从面向过程到面向对象，把逻辑抽离成模块，但仍然存在大量问题
当我们在页面中使用一些es6语法时，如Module，浏览器是无法识别的。他需要webpack帮我们翻译成浏览器可以识别的语言。

面向过程（不方便维护）

我们的index.html文件 —-> 引入一个index.js文件。在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>我是主页面</title>
</head>
<body>
  <div id = "root"></div>
  <script src="./index.js"></script>
</body>
</html>

var dom = document.getElementById('root')

var header = document.createElement('div')
header.innerText = 'header';
dom.append(header)

var sidebar = document.createElement('div')
sidebar.innerText = 'sidebar';
dom.append(sidebar)

var content = document.createElement('div')
content.innerText = 'content';
dom.append(content)

抽离成模块(但仍然会遇到其他问题)

:::danger 我们把index.js中的代码拆分成多个文件。例如：header.js、sidebar.js、content.js :::

但是，单纯的把逻辑抽离成模块也会引发以下问题

1、在主文件(index.html)中引入的js文件会变多，发送的请求也会增多，会导致网页卡顿 2、在一个js文件引入其他js模块时，会因为主文件(index.html)中js的引入顺序问题出现不容易排查的错误 3、在一个js文件引入其他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>我是主页面</title>
</head>
<body>
  <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>

function Header(){
  var header = document.createElement('div')
  header.innerText = 'header';
  dom.append(header)
}

function Sidebar(){
  var sidebar = document.createElement('div')
  sidebar.innerText = 'sidebar';
  dom.append(sidebar)
}

function Content(){
  var content = document.createElement('div')
  content.innerText = 'content';
  dom.append(content)
}

var dom = document.getElementById('root')
new Header();
new Sidebar();
new Content();

无法识别的es6代码

:::success 为了解决抽离成模块后产生的问题，我们想到一种方法。就是使用import来在js文件中引入需要的js模块就好了。 :::

但他会因为浏览器无法识别import而报错，所以才需要webpack去转换

<!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>我是主页面</title>
</head>
<body>
  <div id = "root"></div>
  <script src="./index.js"></script>
</body>
</html>

import Header from './header'
import Sidebar from './sidebar'
import Content from './content'

new Header();
new Sidebar();
new Content();

function Header(){
  var dom = document.getElementById('root')
  var header = document.createElement('div')
  header.innerText = 'header';
  dom.append(header)
}
export default Header;

function Sidebar(){
  var dom = document.getElementById('root')
  var sidebar = document.createElement('div')
  sidebar.innerText = 'sidebar';
  dom.append(sidebar)
}
export default Sidebar;

function Content(){
  var dom = document.getElementById('root')
  var content = document.createElement('div')
  content.innerText = 'content';
  dom.append(content)
}
export default Content;

看到第三点的时候，我们可能会认为webpack是一个js的翻译器。但这种说法是错误的。

Bundler —- 模块打包工具

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack就是一个模块打包工具。

为什么不是一个js翻译器，因为它只认识部分js语言，其他的js高级语言它也不懂。他只是把它可以识别的模块进行打包。

什么是模块

如同我们上面代码中把代码分离成多个部分，就叫模块化。在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。

最早的时候webpack只是一个js的打包工具。

例如：var Header = require(‘./header.js’)

但是随着webpack的发展，它能打包的模块越来越多。
例如：

ES2015 import 语句
CommonJS require()语句
AMD define 和 require语句
css/sass/lesss文件中的@import 语句
样式( url(…) )或 HTML 文件( )中的图片链接( image url )

知识补全

模块
 模块API