前言在还未接触webpack,就有几个疑问:1. webpack本质上是什么?2. 跟异步模块加载有关系吗?3. 可否生成多个文件,一定是一个?4. 被引用的文件有其他异步加载模块怎么办?在学习webpack时,也有几个疑问:1. webpack有哪些常用的插件?2. 常用的Lo ...
前言
在还未接触webpack,就有几个疑问:
1. webpack本质上是什么?
2. 跟异步模块加载有关系吗?
3. 可否生成多个文件,一定是一个?
4. 被引用的文件有其他异步加载模块怎么办?
在学习webpack时,也有几个疑问:
1. webpack有哪些常用的插件?
2. 常用的Loader有哪些?
3. 由于运行时是使用编译后,那开发调试怎么办?
在学习webpack后,也剩几个疑问:
1. 为什么用选择webpack?
2. webpack的局限地方,或者不适用场景?
webpack是什么
webpack是一个前端构建的打包工具(并不是什么库或框架), 它能把各种资源,例如JS(含JSX)、coffee、css(含less/sass)、图片等都作为模块来处理和使用。
根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
代码拆分(关键)
webpack有两种组织模块依赖的方式,同步和异步。异步依赖作为分割点,形成一个新的块。在优化了依赖树后,每一个异步区块都作为一个文件被打包。
其实就是异步部分用require.ensure方法包裹起来,里面所有的依赖会生成单独一个文件,每一个require.ensure生成一个文件。
示例:
index.html
<html><head> <meta charset="utf-8"></head><body> <h1 id="t1"></h1> <h2 id="t2"></h2> <script src='/images/loading.gif' data-original="dist/bundle.js"></script></body></html>
原标题:webpack学习总结
关键词:web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。