你的位置:首页 > 软件开发 > Java > webpack学习总结

webpack学习总结

发布时间:2016-08-20 17:00:08
前言在还未接触webpack,就有几个疑问:1. webpack本质上是什么?2. 跟异步模块加载有关系吗?3. 可否生成多个文件,一定是一个?4. 被引用的文件有其他异步加载模块怎么办?在学习webpack时,也有几个疑问:1. webpack有哪些常用的插件?2. 常用的Lo ...

webpack学习总结

前言

在还未接触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学习总结根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

代码拆分(关键)

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

web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。