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中进行维护，对比全部摞在一起，还是便利了不少。但是还是存在以下问题：

在html中引入多个js文件，页面多了http请求，导致页面加载速度变慢；

不能在index.js中看出相应的类（Header）对应的文件是哪一个，必需回到html中看；

查错能力弱，如当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是一个模块打包工具