webpack打包流程原创

1 查找配置文件

2 查找入口和出口

3 找到入口

3.1 根据import文件查找依赖关系

3.2 打包js文件

• 打包低级js文件
• 通过 babel 打包高级js文件

3.4 打包非js文件

• css >>> css-loader style-loader
• less >>> less-loader
• vue >>> vue-loader

3.5 生成HTML

• htmlWebPackPlugin

3.6 通过plugin/插件扩展webpack功能

4 输出出口

4.1 mini-css-extract-plugin单独打包css

4.2 output多出口