npm run dev&build的流程梳理

今天项目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