摘要
webpack是优秀的模块化打包工具，本文主要介绍如何使用webpack搭建一个JSSDK的模块化开发环境。
开发环境需要满足哪些功能
- 可根据开发环境打包
- 每次打包需要清除旧的文件
- 开发时需要有热更新支持
- 打包后的JS需要有自动注入到页面的能力
前置工作
- 首先需要安装webpack、webpack-cli
- 创建webpack.config.js配置文件，通常我们需要两个配置文件：webpack.dev.config.js、webpack.build.config.js。两个文件用来区分不同的开发环境。
根据开发环境打包
在npm当中，package.json提供了scripts属性，它作为脚本命令执行。我们利用此属性配置对应的开发环境。
每次打包清除旧的文件
每次打包我们都会生成新的文件，如果不及时清理的话会占用大量硬盘空间。webpack为我们提供了插件来简化这些操作。使用npm install -D clean-webpack-plugin安装对应插件，并进行对应的配置：
热更新支持
热更新指的是不需要重新运行就可以看到修改后的代码的运行结果。使用npm install -D webpack-dev-server安装对应的插件，并进行对应的配置：
上图配置参数指定了更新目录，是否压缩，指定端口，hot为是否需要热更新。
JS自动注入页面
我们需要一个页面来承载我们开发的sdk，并将sdk自动注入到对应的页面避免人工引入造成不必要的过失。使用npm install -D html-webpack-plugin安装html的处理插件，并做对应的配置：
上图配置我们指定了打包后页面的文件名、对应的模版路径，以及需要注入哪些js。做完了这一步，我们利用webpack进行模块化开发的环境就基本完成了。完整配置如下：
使用方式
有了上述的环境搭建，我们还需要新建一个src文件夹来存放我们的源代码，我们使用ES6的import语法进行模块化开发，然后由webpack去做兼容和打包的工作。示例如下：
由于ES6 import语法的静态分析，webpack会进行treeshaking处理，所以上图使用方式最终打包后的SDK只会打包使用过的模块，然而作为一个SDK这显然不符合我们的要求。我们的要求是SDK提供一些预置的方法给开发者使用，那么我们如何让上述的moduleA与moduleB不被treeshaking掉呢，答案很简单，使用它：
以上我们就实现了使用webpack模块化开发的环境搭建思路。建议根据思路动手尝试。
小帖士
使用html-webpack-plugin，为指定的html注入js,注入的是异步加载的脚本。
<script defer="" src="index.js"></script>
defer的作用：www.runoob.com/tags/att-sc…
浏览器渲染原理：zhuanlan.zhihu.com/p/29418126
