这是我参与第五届青训营伴学笔记创作活动的第十二天

48 阅读1分钟

前端与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标签