今天项目UAT打包生产啦,于是想着梳理一下run DEV和build 的流程
Webpack
核心理念
- entry 一个可执行模块或库的入口文件。
- Module,模块,在Webpack中一切皆模块,一个模块即为一个文件。Webpack会从Entry开始递归找出所有的依赖模块。
- chunk 多个文件组成的一个代码块,例如把一个可执行模块和它所有依赖的模块组合和一个 chunk 这体现了webpack的打包机制。
- loader 文件转换器,例如把es6转换为es5,scss转换为css。
- plugin 插件,用于扩展webpack的功能,在webpack构建生命周期的节点上加入扩展hook为webpack加入功能。
- Output,输出结果,源码在Webpack中经过一系列处理后而得出的最终结果。
构建流程
- 以entry作为入口文件
- 找到依赖的module,Module.rules里配置的Loader规则进行相应的转换处理
- 对Module进行转换后,再解析出当前Module依赖的Module,这些Module会以Entry为单位进行分组,即为一个Chunk
- 一个Chunk,就是一个Entry及其所有依赖的Module合并的结果
- Webpack会将所有的Chunk转换成文件输出Output
VUE-npm run dev
npm run dev
- 在package.json 中,s