webpack究竟是什么

「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」。

相信很多webpack初学者不是很清楚webpack究竟是用来做什么的，笔者也有同样的困惑，下文是学习webpack课程产出的笔记，希望大家看完之后能对webpack有一个基本的认识（反正笔者学完已经知道webpack是什么了）。

面向过程

如下代码，如果按照面向过程来写代码，所有的js逻辑都堆在一个文件里，这样文件会越来越大，最终变得不可维护。

<!--index.html-->
<p>hello world</p>
<div id="root"></div>
<script src="./index.js"></script>

// index.js
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);

面向对象

在一个index.html中引入了多个js文件，首先会使整个页面加载速度变慢（浏览器每次处理<script>标签，都会让页面等待脚本的解析和执行）

<!--index.html-->
<p>面向对象</p>
<div id="root"></div>
<script src="./header.js"></script>
<script src="./sidebar.js"></script>
<script src="./content.js"></script>
<script src="./index.js"></script>

// index.js
var dom = document.getElementById('root');

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

从new Header();中看不出对应的文件（地址）是哪一个。不仅如此，也很难排查错误。将<script src="./content.js"></script>如下图颠倒顺序

发现控制台报错

具体查看只追溯到index.js，对于新手来说不能轻易排查错误。

综上，按照上述方式进行面向对象编程，代码会变得不容易维护。

ES Modules 模块引入方式

<!--index.html-->
<p>面向对象</p>
<div id="root"></div>
<script src="./index.js"></script>

// index.js
import Header from './header.js';
import Sidebar from './sidebar.js';
import Content from './content.js';

var dom = document.getElementById('root');

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

代码如上修改就可以解决之前的几个问题，首先index.html中只引入了一个js文件，所以会提升网页运行速度；其次，修改后的index.js文件和文件之间的依赖关系非常明确；最后也不会出现顺序颠倒报错问题，因为在运行代码前已经确保引入了依赖的模块，这样也就不存在依赖颠倒或依赖顺序错误造成的代码运行错误。

使用webpack

浏览器不能识别import这种语句，所以如果想用ES Modules实现代码，其中一种解决办法就是借助webpack，webpack可以帮助浏览器进行翻译，告诉浏览器我们其实是在引入一个模块。通过webpack把上述代码进行翻译，浏览器就能运行上述的代码。

webpack安装&打包

npm init -y在项目目录中创建了一个package.json文件
npm install webpack webpack-cli -D在项目中安装webpack
npx webpack ./index.js用webpack来翻译index.js这个文件，生成dist目录下的main.js文件。
将index.html中index.js地址更改为main.js的地址
在header(sidebar,content)组件中加上模块导出export default Header
改写完代码之后，重新运行npx webpack ./index.js

webpack定义

webpack是一个模块打包工具。 webpack能将引入的模块打包到一起，生成最终的js文件。

// ES Modules 模块引入方式
import Header from './header.js';//引入模块
export default Header;

// CommonJS 模块引入方式
const Header = require('./header');
module.exports = Header;