入门webpack配置流程
1、当前Web开发面临的困境
- 文件依赖关系错综复杂
- 静态资源请求效率低
- 模块化支持不友好
- 浏览器对高级Javascript特性兼容程度较低
- …
2、webpack 基本使用
2.1 webpack 概述
2.2 webpack 基本配置
1、在项目中安装和配置 webpack
2、 配置打包的入口和出口
3、 配置webpack的自动打包功能
4、 配置 html-webpack-plugin 生成预览页面
5、 配置自动打包相关参数,打包完成后自动打开项目页面
2.3 webpack 中的加载器
1、通过loader打包非js模块
在实际开发过程中,webpack默认只能打包处理以 .js后缀名结尾的模块,其他非 .js后缀名结尾的模块,webpack默认处理不了,需要调用loader加载器才可以正常打包,否则会报错!
loader加载器可以协助webpack打包处理特定的文件模块,比如:
- less-loader 可以打包处理 .less 相关的文件
- sass-loader 可以打包处理 .scss 相关的文件
- url-loader 可以打包处理 css中与 url 路径相关的文件
2、loader 的调用过程
3、loader 加载器的基本使用
3.1 打包处理 css 文件
3.2、打包处理 less 文件
3.3、打包处理 less 文件