webpack初探

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是一个模块打包工具