在开发的过程中我们需要通过模块化的方式来进行开发
比如说 CommonJS Moudle.js AMD / CMD 的方式进行模块
如果别人想用我的东西的时候,可以进行导出的操作
如果我想要用别人的东西的时候,可以进行导入的操作
在node 中可以使用CommonJs的方式进行导入
我们会通过一些高级的特性来加快效率或者是安全性
ES6+,TypeScript开发脚本逻辑,通过sass,less来编写css样式代码
我们的一些软件,如果想要实时的反映到浏览器上面,提高开发的效率
比如说开发完成了以后还需要对于代码进行压缩,合并以及其他的优化
这些都是对于代码的一些优化
这里可能会遇到很多的问题
前端发展到现在最流行的就是框架
在公司里面最主要使用三大框架进行开发
创建项目的时候,我们需要用到这样的一个脚手架
Vue-cli 里面已经有一个webpack了,这里解决的方案都是webpack
Vue-CLi create - react - app,Angular-Cli都是基于webpack来帮助我们支持模块化
less,typescript,打包优化
这里将资源进行打包,部署到浏览器,用户在访问静态服务器的时候把里面的静态资源下载下来
webpack 底层使用的是node.js
在使用模块化的代码,可能使用的是CommonJS的模块
默认情况下,浏览器是不会支持的
传统浏览器上是无法直接支持模块化
在Webpack里面可以选择这些模块
在webpack中会将写的一些高阶的代码转换成浏览器可以识别的代码
比如说less sass typescript
在旧的浏览器上面不支持的es代码,webpack会将它转换成低版本浏览器支持的javascript 代码
为现在的javascript 程序而生的
bundle your assets
随便使用 javascript 的方式开发, typescript 进行开发
使用sass 方式进行开发
可以依赖很多的东西,任意使用想要开发的模式,这个时候就通过webpack进行打包成最终
的一个静态的资源
将静态的资源部署到服务器上面去
工作中的webpack 已经在Vue-cli里面已经配置好了
除了日常工作之外,如果我们希望在原有的脚手架上来定制一些测试打包性能的工具
发布的时候的一些性能
做一些公共代码的抽取
在某些情况下,我们需要编写自己的loader
需要掌握基础的指令
可以自定义的loader,使用loader进行一个解析
特殊情况下使用自己的loader
掌握框架的工程师
自己的这些配置都是自己进行编写的
如果想要称为前端高级工程师的话,webpack也是必须掌握的一个功能
工作的时候用到了这样的一个webpack,在前端领域中webpack的重要性
(理解工作的时候webpack)
