webpack

webpack核心原理

• 一切皆模块
• 事物（业务）分割成更小的易于管理的片段，从而达到重复利用等的目的
• 按需加载：传统的模块打包工具（module bundlers）最终将所有的模块编译生成一个庞大的bundle.js文件。但是在真实的app里边，“bundle.js”文件可能有10M到15M之大可能会导致应用一直处于加载中状态。因此Webpack使用许多特性来分割代码然后生成多个“bundle”文件，而且异步加载部分代码以实现按需加载。
• https://segmentfault.com/a/1190000005089993

• 1. css-loader加载所有的css文件以及css自身的依赖（如，@import 其他css）到JSON对象里，Webpack然后将处理结果传给“style-loader”

  2. style-loader接受JSON值然后添加一个style标签并将其内嵌到html文件

• 自动分块打包并按需加载、对图片资源引用的自动定位、根据图片大小决定是否用base64内联、开发时的模块热替换
• 使我们能用这样的单文件格式 (*.vue) 来书写Vue组件