webpack核心原理
- 一切皆模块
- 事物(业务)分割成更小的易于管理的片段,从而达到重复利用等的目的
- 按需加载:传统的模块打包工具(module bundlers)最终将所有的模块编译生成一个庞大的
bundle.js
文件。但是在真实的app里边,“bundle.js”文件可能有10M到15M之大可能会导致应用一直处于加载中状态。因此Webpack使用许多特性来分割代码然后生成多个“bundle”文件,而且异步加载部分代码以实现按需加载。 - https://segmentfault.com/a/1190000005089993
-
css-loader加载所有的css文件以及css自身的依赖(如,@import 其他css)到JSON对象里,Webpack然后将处理结果传给“style-loader”
-
style-loader接受JSON值然后添加一个style标签并将其内嵌到html文件
-
- 自动分块打包并按需加载、对图片资源引用的自动定位、根据图片大小决定是否用base64内联、开发时的模块热替换
- 使我们能用这样的单文件格式 (*.vue) 来书写Vue组件