webpack初探

Posted 2021-03-17 金钩梨

webpack是一个模块打包工具

原始：最开始的时候我们做一个页面会通过如下形式编写网页：

html：

<p>这是原始网页</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);

页面效果：

 

 

 这是面向过程的编程方式，当内容越来越多的时候会导致代码越来越多，最终变得不可维护。

 

进步：这个时候迎来了面向对象的编程方式

 

 

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>

header.js：    -- sidebar.js、content.js同理

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

index.js:

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

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

这样改造之后，使得代码更具有维护性，关于header的代码都可以在header.js中进行维护，相比全部摞在一起，还是方便了不少。但是还是存在以下问题：

1. 在html中引入多个js文件，页面多了http请求，导致页面加载速度变慢；
2. 不能在index.js中看出相应的类（Header）对应的文件是哪一个，必须回到html中看；
3. 查错能力弱，如当js文件加载顺序出错，则很难找出错误所在。

 

再进步：假如我们能在js中引入相应路径下的模块，就可以解决以上问题

改造一下js：

// ES module 模块引入方式
import Header from \'./header\';
import Sidebar from "./sidebar";
import Content from "./content";

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

但是，这样的话浏览器会报错，因为它并不认识import，这个时候webpack就登场了，它认识import，可以把代码做一次“翻译”，让浏览器正确运行。

 

初始化项目：

npm init demo

安装webpack、webpack-cli：（后面再介绍这俩家伙是什么玩意儿）

npm install webpack webpack-cli --save-dev

然后翻译一下js代码：

npx webpack index.js

这个时候目录中会多出以下文件，需要在html中引入：

 

 不过，因为我们是用ES module的形式引入模块，所以也需要用ES module的形式导出模块，不然会报错，所以还需要改造一下header.js、sidebar.js、content.js：

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

export default Header;

当然，也可以使用CommonJS、CMD、AMD等引入规范，webpack也能识别。

 

那么，现在看来webpack好像是一个js翻译器？

其实不然，webpack刚推出的时候，它是一个js的模块打包工具，也就是说它只能require或者import一下js文件到index.js中。现在它可以打包任何形式的文件：如我们经常能在项目中看到如下代码：

var style = require(\'./index.css\');
import styles from \'./index.css\';

当然，它还可以打包png、jpg等文件。

所以，回到开头：webpack是一个模块打包工具