邂逅Webpack和打包过程

1 认识webpack工具

前端开发的流程

内置模块path

path常见的API

在webpack中的使用

认识webpack

脚手架依赖webpack

Webpack到底是什么呢

Webpack官方的图片

Vue项目加载的文件有哪些呢？

Webpack的使用前提

Webpack的安装

 

2 webpack基本打包

Webpack的默认打包

创建局部的webpack

3 webpack配置文件

Webpack配置文件

指定配置文件

Webpack的依赖图

编写案例代码

4 编写和打包CSS文件

css-loader的使用

css-loader的使用方案

loader配置方式

Loader的配置代码

认识style-loader

配置style-loader

5 编写和打包LESS文件

如何处理less文件？

Less工具处理

less-loader处理

6 postcss工具处理CSS

认识PostCSS工具

postcss-loader

单独的postcss配置文件

postcss-preset-env

Webpack打包图片-JS-Vue

1 Webpack打包图片

加载图片案例准备

认识asset module type

asset module type的使用

url-loader的limit效果

2 Webpack打包JS代码

 为什么需要babel？

3 Babel和babel-loader

Babel命令行使用

插件的使用

Babel的预设preset

babel-loader

babel-preset

4 Webpack打包Vue

编写App.vue代码

App.vue的打包过程

@vue/compiler-sfc

5 resolve模块解析

resolve模块解析

确实文件还是文件夹

extensions和alias配置