https://www.jianshu.com/p/8dd5885bfb66
Webpack 输出的 bundle.js 是什么样子的吗？ 为什么原来一个个的模块文件被合并成了一个单独的文件？为什么 bundle.js 能直接运行在浏览器中？
bundle.js能直接运行在浏览器中的原因在于输出的文件中通过webpack_require函数定义了一个可以在浏览器中执行的加载函数来模拟Node.js中的require语句。
原来一个个独立的模块文件被合并到了一个单独的bundle.js的原因在于浏览器不像Node.js那样快速地去本地加载一个个模块文件，而必须通过网络请求去加载还未得到的文件。如果模块数量很多，加载时间会很长，因此把所有模块都存放到了数组中，执行一次网络加载。
如果仔细分析webpack_require函数的实现，你还会发现webpack做了缓存优化：执行加载过的模块不会再执行第二次，执行结果会缓存在内存中，当某个模块第二次被访问时会直接去内存中读取被缓存的返回值。
一个Loader的职责是单一的，只需要完成一种转换。如果一个源文件需要经历多步转换才能正常使用，就需要通过多个loader转换。在调用多个Loader去转换一个文件时，每个Loader会链式的顺序执行，第一个Loader将会拿到需处理的原内容，上一个Loader处理后的结果会传给下一个接着处理，最后的Loader将处理后的最终结果返回给Webpack.
所以，在拟开发一个Loader时，请保持其职责的单一性，你只需关心输入和输出。