什么是webpack

webpack

webpack是一个现代JS应用程序静态模块打包器（bundler），它能将多个js文件打包成一个文件（其实不止能打包js文件，也能打包其他类型的文件，比如css文件，json文件等）。

Webpack出现始末

面向过程的代码整合方式，使得所有JS代码都"挤"在一个地方，代码混乱。

面向对象的前端开发，就是将整块混合的代码分割成一块一块，使得代码模块化，从而一个代码模块负责一部分的页面逻辑。

但是这样做导致页面加载速度变慢；js文件必须按规定顺序加载，否则控制台报错。

为了解决上述问题，我们引入了webpack。

webpack使用

1. 在ES6规范下，使用vue.js前端框架开发，安装node.js。
2. 安装webpack：npm install webpack webpack-cli --save-dev
3. 运行webpack：npx webpack index.js

 index.js:

import Header from './header.js';
import Content from './content.js';

new Header();
new Content();

6. 查看根目录：出现dist文件夹(页面名称是dist.html)
7. dist文件夹：有一个main.js文件，这个main.js文件是webpack将index.js、header.js、content.js、footer.js打包在一起的一个文件。
8. 在页面中引入main.js

<script src="./dist/main.js"></script>