入门webpack配置流程

1、当前Web开发面临的困境

  • 文件依赖关系错综复杂
  • 静态资源请求效率低
  • 模块化支持不友好
  • 浏览器对高级Javascript特性兼容程度较低

2、webpack 基本使用

2.1 webpack 概述

入门webpack配置流程

2.2 webpack 基本配置

1、在项目中安装和配置 webpack
入门webpack配置流程
2、 配置打包的入口和出口
入门webpack配置流程
3、 配置webpack的自动打包功能
入门webpack配置流程
4、 配置 html-webpack-plugin 生成预览页面
入门webpack配置流程
5、 配置自动打包相关参数,打包完成后自动打开项目页面
入门webpack配置流程

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 的调用过程
入门webpack配置流程
3、loader 加载器的基本使用

3.1 打包处理 css 文件入门webpack配置流程
3.2、打包处理 less 文件 入门webpack配置流程
3.3、打包处理 less 文件
入门webpack配置流程

2.4 配置postCSS 自动添加 css 的兼容前缀

入门webpack配置流程

2.5 打包样式表中的图片和字体文件

入门webpack配置流程

2.6 打包js文件中的高级语法

入门webpack配置流程