1.如何使用babel-loader?
webpack自身可以加载js模块，不能转化js代码如果打包js文件会原封不动传到浏览器，如果当前浏览器支持ES6代码则可以正常显示，若浏览器版本过低则不支持，需要使用babel-loader结合babel和webpack对js文件解析。
安装：npm install babel-loader @babel/core @babel/preset-env
- babel-loader:在webpack中应用babel解析ES6的桥梁；
- @babel/core：babel核心模块；
- @babel/preset-env：babel预设，一组babel插件的集合
webpack.config.js中配置：
在hello.js中写两个函数：
打包后的js文件在bundle.js中显示：
其中regeneratorRuntime是webpack打包生成的全局辅助函数，由babel生成，用于兼容async/await的语法。
安装 regeneratorRuntime需要@babel/runtime,@babel/plugin-transform-runtime两个插件，配置一下：
2.代码分离
把文件分到不同的bundle中，bundle是打包出来的文件，可以按需加载或者并行加载，代码分离可以获取更小的bundle以及控制资源加载的优先级，合理使用有利于优化加载时间。
常用分离方法：
- 使用entry配置手动分离代码（如果多个入口，多个入口共享的文件会重复打包）
- 使用Entry dependencies或SplitChunksPlugin去重和分离代码
- 使用模块的内联函数import调用来分离代码
2.1方法一：入口节点
webpack.config.js中配置两个entry,所以对应着有两个出口文件filename：
app.html在可以看到两个文件都被引用：
anothe-module.js中使用loadsh库:
使用webpack打包后，可以看到：
another.bundles.js的文件更大1.37mb，因为使用了loadsh,loadsh也被打包到了another.bundles.js中。如果这时在index.js也使用loadsh,会发现index.bundle.js变为2.39mb，是因为loadsh也打包了。
loadsh分别被打包了，重复打包到各自的chunk里，这是入口起点打包的缺点。
2.2方法二：防止重复
webpack.config.js中配置entry为对象形式增加dependOn属性，和shared：
app.html在可以看到两个文件都被引用并且增加了一个shared.bundle.js：
使用webpack打包后，可以看到：
通过将重复的打包到shared.bundle.js中在引用使用，减少了内存占用。
另一种实现方法使用插件split-chunks-plugin。
webpack.config.js中增加一个splitChunks的配置项：
使用webpack打包后，可以看到重复的loadsh被分离出：
2.3方法三：动态导入
新建一个async.mmodule.js 动态导入loadsh:
在index.js 正常导入：
可以直接实现将loadsh文件分离出去：
那么如果静态导入，可否与动态导入一起做代码抽离呢?
一旦加入了静态资源就要配置splitsChunks,才可以正常运行，不会重复打包。
3.懒加载
动态导入的意义，实现懒加载（按需加载）是一种很好的优化王爷的方法，这种方法把代码在逻辑断点处分离开，然后再一些代码块中完成某些操作后，立即引用或即将引入另外一些新的代码块，这样加快了应用的初始加载速度，减轻了代码块的总体体积，因为有一些代码块可能永远不加载。
举例子，写一个math.js暴露两个函数add,minus.
在index.js中插入一个button，点击按钮时动态引入math.js，实现add():
这样就可以实现懒加载，只有当用户点击button时才会打包math.js，通过魔法注释：/*webpackChunkName: 'math*/打包后的文件名为math.bundle.js,其中.bundle是我们自己加的后缀。
4.预获取、预加载模块
动态导入的意义2，在声明import时，使用下面这些内置指令，可以让webpack输出"resource hint(资源提示)"，来告知浏览器：
prefetch(预获取)：将来某些导航下可能需要的资源；
preload(预加载)：当前导航下可能需要资源；
预获取加入新的注释： webpackPrefetch: true
prefetch(预获取)的意义在于党首页面的内容都加载完毕后，在网络空闲时再去加载打包好的math.bundle.js文件。
预加载加入新的注释： webpackPreload: true
preload(预加载)与懒加载类似，prefetch更优秀些。