2020-11-13webpack前置课程
2020-11-13 本文已影响0人
夏天的风2020
webpack前置课程:
// npm -----包管理器的使用经验(怎么安装包,卸载包,运用一些简单的命令)
// Common JS(---node.js的模块化语法----)
// ES6
// react
webpack是模块打包器,要了解webpack,就要先了解模块打包这个概念,
如果要开发一个项目,业务逻辑会非常的多,这个时候你的开发会按照你的功能逻辑拆分成一个个模块,
这个时候开发起来会更加的有条理,维护起来也会更加的方便,
但这样就会涉及到一个问题,模块之间会有着复杂的依赖关系,在处理这些模块的依赖的时候,
后端的开发有着得天独厚的条件,模块化是天生支持的,当一个请求进来的时候,他可以马上同步的去引入模块的依赖,
因为所有的代码都放在服务器里面,想得到什么样的代码随时都可以得到。
但是对于前端项目来说就不一样了,你会遇到一个很棘手的问题,你的模块依赖怎么办?
你的代码都是从后端请求过来的,你没办法像后端那样,同步的去引入代码,
这个时候你就需要模块打包器了,
模块打包器会解决你这个问题,它会先分析你的项目依赖,然后会按照一种复杂的规则把他们打包在一起,
当然这些规则是这个模块打包器的开发者隐藏起来的,你不需要知道他是怎么样打包的,
你只需要知道这个打包器专门会把你的模块依赖,把你的代码都打包到一起,然后输出一个新文件就好了,
你会得到一个新的 js文件,,这个时候你只要加载这个新的js文件就好了,
webpack天生拥有这种模块打包的能力,
他不仅能帮你打包js文件,他还能帮你打包你所有的资源,你的css文件,你的字体,你的图片,
这些资源他都会视为模块,都会进行打包,但如果仅仅只是打包东西,那就太小瞧webpack了,
webpack有着很强大的 ,在打包过程中,他有各种各样的loader来帮你处理文件的内容,
比如说编译一些语法,比如说处理一些路径的问题等等,
他还有各种各样的插件,来辅助你的开发和项目构建,从而加快你的开发效率,
如果你在开发一个大型的单页应用,他的代码分割功能对于页面加载性能的优化是意义非凡的,他太厉害了,
从项目的起始到项目的打包上线,他存在整个项目的开发周期,