1.为什么使用webpack?
webpack不仅可以打包js代码，并且那个且支持es模块化和commonjs,支持其他静态资源打包，如图片、字体。。。
2.如何解决作用域问题？
作用域问题：例如loadsh等库，会绑定window对象，会使得window臃肿。
grunt和gulp是最早使用的任务执行器，是将所有的项目文件拼接在一起（IIFE）,从而解决了大型作用域问题。
当函数变成了一个立即调用的表达式时，表达式中的变量不能够在外部访问，不会污染window，解决了作用域问题。
如果部分暴露，部分不暴露，我们可以这样解决
3.如何解决代码拆分问题？
问题：如果处理一个大的文件，用户需等待一段时间才可以加载成功（白屏）。
解决：node.js模块化处理。
common.js：浏览器不支持模块化
暴露方法：
引用（开箱即用）：
4.如何让浏览器支持模块？
解决：使用require.js
define定义依赖和真正暴露：没有依赖前面为【】
如何加载文件：（在index.html使用script标签加载，data-main='入口文件路径'）
入口文件访问文件：访问目录点（位置）还在index.html
解决：ESMAScript模块化<script type='module>
暴露：export default xxx
引入：import 名字 from '路径'
出现跨域问题：npx http-server
npx:当某个模块不存在时，从互联网帮忙安装一个模块
5.webpack,parcel,rollup,vite
6.安装运行webpack
npx webpack
7.插件是什么？
创建webpack.config.js，命名不可以改变。
使用插件时，先安装所需插件，然后定义常量例如下图的const HtmlWebpackPlugin=require('html-webpack-plugin')，其中require是引用插件，插件需要在plugins中实例化一下，即下图的new HtmlWebpackPlugin({}).
引入了一个创建html文件的插件HtmlWebpackPlugin
8.搭建开发环境
开发模式：
npx webpack --watch 监听但手动刷新
安装webpack-dev-server，热模块更新。
npx webpack-dev-server --open,自动打开
配置dev-server，当前服务的根目录
9.资源模块介绍
asset Moudle 允许使用webpack打包其他资源文件
1.asset/resource:发送一个单独文件并导出url；
2.asset/inline：导出一个资源的dataurl;
3.asset/source：导出资源的源代码；
4.asset：通用资源类型，在导出dataurl和单独文件之间选择一个导出。
webpack.config.js中设置module属性：
上图使用asset/resource打包.png后缀的文件；使用asset/inline打包.svg后缀的文件；使用asset/source打包.txt后缀的文件；使用asset打包.jpg后缀的文件，在使用asset时可以自定义资源界限，默认是小于8kb会被视为inline模型，反之是resource模型。
在output中设置
也是自定义文件名和路径优先级低于在generator设置。
index.js:
