1. webpack初探

2-1webpack初探

1.面向过程写法

1-1index.html

1-2 index.js

通过在index.js中对dom进行操作

2.面向对象写法

2-1index.html

2-2对1-2的js文件进行拆分

Sidebar.js

2-3 在index.js中实例化

3. 面向对象写法优化

3-1 增加了http请求，加载速度变慢

3-2 在index.js中实例化顺序需与index.html引用js顺序一致（依赖关系不明确）

3-3 优化

1. 在index.html中只引入index.js
2. 在index.js通过es6module模块引入

3.由于浏览器不识别es6module，而webpack可以。
4.安装webpack/webpack-cli
npm i webpack -S
npm i webpack-cli -D

2-2什么是模块打包工具？

webpack是一个模块打包工具，下面是演示内容。
index.js

import 后面的内容即是模块，所以看到import即想到模块。

2-3 webpack安装

npm i webpack webpack-cli -D

2-4webpack的配置

无非就是webpack.config.js和package.json中的配置。
webpack-cli的作用是使我们可以在命令行中使用webpack命令，比如

• npm webpack
• npm webpack --mode development