- 如何执行打包命令
- 打包完输出到dist目录,通过html文件引入到浏览器上运行
- 分析打包生成的文件boundle.js
// 分析boundle.js文件
文件结构:(function(modules) {处理模块加载})({文件: fun, 文件: fun})
1. 将引用的文件路径不全,如“./jd”转化后是“./jd.js”
2. 将node中require函数替换webpack自定义加载函数__webpack_require__
- 实现: 执行xx命令,从webpack.config.js打包项目并生成bundle.js
- 创建命令的目录
- 生成webpapck.json
- 生成命令,npm link(创建全局快捷方式)
- 读取代码内容
- 读取模块文件相对路径
- 读取模块文件中依赖的包,首先需要解析
- 解析结果: 是否存在子依赖包,解析的源码souceCode
- vue ===> html、css、js es6 ===> es5
vue ===> html、css、js es6 ===> es5
- 使用ast语法树解析[https://astexplorer.net/]
- 如const n = 1; -> const x = 1;
- 将代码中的require替换成__webpack_require__
- 补全文件后缀,将require("./jd")转化成require("./jd.js")
- 收集dependencies
- 使用模版生成boundle.js, 传入的参数必须是动态的
- 模板express ejs
- 使用fs将生成的文件写入bundle.js, 使用index.html引入打开测试与之前webpack打包输出一样
- less sass vue...
- 作用: 转化 less转化为css
- 使用自定义的loader less-loader style-loader
- 打包的时候使用自定义的loader
- 代码加工:压缩、合并、混入等等