前端与Webpack | 青训营笔记
这是我参与第五届青训营伴学笔记创作活动的第十二天
一、什么是Webpack 1.本质上是一种前端资源编译、打包工具
二、使用Webpack 1.入口处理 从“entry”文件开始,启动编译流程
2.依赖解析 从“entry”文件开始,根据“require”or“import”等语句找到依赖资源
3.资源解析 根据“module”配置,调用资源转移器,将png、css等非标准JS资源转译为JS内容
4.资源合并打包 将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
三、认识Loader:链式调用
1.less-loder:实现less=》css的转换
2.css-loader:将css包装成类似module.exports=“${css}"的内容,包装后的内容符合JavaScript语法
3.style-loader:将css模块包进require语句,并在运行时调用injectStyle等函数将内容注入到页面的style标签