webpack动态引入打包方式配置

实际应用场景比如：我们按照路由组件进行拆分，只有点击需要加载对应路由组件后去动态加载组件内容，开始只加载首页展示内容。该例子为了着重说明动态引入的打包方式配置，会弱化项目代码拆分，只是单纯点击后动态引入一个hello world的文本组件

1、基本环境配置，本示例已React组件为例。安装相关编译依赖（为了可以已ES6方式写react）

安装依赖

npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader @babel/preset-react react react-dom -S

添加.babelrc配置文件

配置webpack

配置package.json增加编译命令

编写主React入口App组件

2、动态引入打包配置

安装动态打包依赖babel插件

npm i @babel/plugin-syntax-dynamic-import -S

配置.babelrc文件

编写动态引入的组件内容：

App组件中增加动态引入逻辑

运行编译脚本

npm run build

本文主要说明动态引入的打包方式，不增加html模板打包，采取手动新建html的方式，其实配置也很简单增加对应的plugin即可。增加html引入主js文件

浏览器打开后运行效果如下

点击后加载了动态组件效果如下图

说明：点击后动态引入了对应的js文件，并渲染到了页面上。基于动态引入的机制，我们可以让app首次只加载需要的内容，随着用户操作去加载对应需要的内容，可以提升程序性能