Webpack集成化工具

1. 当静态资源比较多时（常见的静态资源：JS，CSS，Images，字体文件，模板文件）

   ​ 在进行网页加载时，会不断地对静态资源进行请求，这样就会导致网页加载速度慢

   ​ 要处理错综复杂的依赖关系

2. 如何解决：合并相关文件，压缩，图片的Base64编码；

3. webpack会在开发完之后对所有的资源进行一个打包。先分析各个文件资源之间的依赖关系，然后生成一个依赖图并用文件的形式保存下来，浏览器运行的时候就可以读取这个文件，就知道各个代码块之间的关联以及如何调用

4. webpack是由node.js构建，基于整个项目进行构建

5. import $ from ‘jquery’ 表示的意思是从node_modules中导入jquery并将其命名为$

6. webpack.config.js 文件可以进行入口文件以及出口文件的配置，定义好webpack要打包那些文件之后就可以在控制台输出webpack，直接进行打包，但是每次源代码进行了修改之后都要手动输入webpack进行打包，非常不方便

7. 可以使用webpack-dev-server这个工具来实现自动打包编译的功能 npm i webpack-dev-server -D 进行安装

8. webpack-dev-server 帮打包生成的相关文件，并没有存放到实际的物理磁盘上；而是直接托管到了电脑的内存中，所以我们在项目根目录中根本找不到打包后的文件

9. 为了可以在打包好之后自动打开浏览器，可以在package.json中定义dev:“webpack-dev-server --open --hot” 热加载会实现部分更新之后的代码进行更新即可，不对整个页面进行重新请求，即不刷新就使用最新样式