为什么使用webpack
如今web应用的功能越来越丰富,在这些功能的实现的背后,拥有着复杂的javascript代码和依赖包。开发者为了简化开发的复杂度,前端开发者社区内出现了各种实践方法。
- 模块化,让复杂的程序功能可以细分到每一个文件。
- 扩展语言,使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能转换为JavaScript文件使浏览器可以识别。
- css的预处理less、sass。
- …
这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的,这就为webpack类的工具的出现提供了需求。定义
webpack可以看成是一个前端代码的的模块打包器,它通过对项目结构以及依赖的分析,将一些浏览器不能解析执行的扩展语言(TypeScript、sass、less等)进行转换和分模块打包成可以浏览器解析引擎可以直接执行的javasript和css代码。特性
代码切分
对于一个大项目来说,所有代码都打包在一个文件之内会大大增加应用的首屏加载时间,降低了用户体验。为了解决这个问题,代码切分会根据依赖关系树,将代码切分为同步和异步的块,把首屏不需要加载代码块切分到不同的文件内,按需加载需要的模块。加载器
webpack除了加载javascript资源文件外,还可以通过特定的加载器把其他资源文件转化处理成javascript需要的内容。任何资源都可以通过加载器成为webpack加载的模块。插件
webapck拥有丰富的插件系统,开发者可以根据自己的需求,为webpack打包配置添加不同的插件,达到不同的打包结果。
使用webpack
全局安装webpack
1 | $ npm install wabpack -g |
添加入口文件index.js
1 | document.write('我是入口文件'); |
添加html模板
1 | <html> |
然后执行命令打包
1 | $ webpack ./index.js ./bundle.js |
成功后显示结果
1 | Hash: 1ce33659f982ca43bf98 |
在浏览器中打开模板文件可以看到index.js的执行结果。
另外,可以通过新建配置文件webpack.config.js来进行打包
1 | module.exports = { |
执行命令
1 | $ webpack |
效果与前者一样。
配置
通过配置文件可对打包结果进行定义。默认打包配置文件名为webpack.config.js
1 | const path = require('path'); |
以上为webpack常用配置。