前端工程化基础课件-03_邂逅Webpack和打包过程.pdf

邂逅Webpack和打包过程

王红元coderwhy

目录

1认识webpack工具

content

2webpack基本打包

3webpack配置文件

4编写和打包CSS文件

5编写和打包LESS文件

6postcss工具处理CSS

coderwhy内置模块path

◼path模块用于对路径和文件进行处理，提供了很多好用的方法。

◼我们知道在MacOS、Linux和window上的路径时不一样的

window上会使用\或者\\来作为文件路径的分隔符，当然目前也支持/；

在MacOS、Linux的Unix操作系统上使用/来作为文件路径的分隔符；

◼那么如果我们在window上使用\来作为分隔符开发了一个应用程序，要部署到Linux上面应该怎么办呢？

显示路径会出现一些问题；

所以为了屏蔽他们之间的差异，在开发中对于路径的操作我们可以使用path模块；

◼可移植操作系统接口（英语：PortableOperatingSystemInterface，缩写为POSIX）

Linux和MacOS都实现了POSIX接口；

Window部分电脑实现了POSIX接口；

coderwhypath常见的API

◼从路径中获取信息

dirname：获取文件的父文件夹；

basename：获取文件名；

extname：获取文件扩展名；

◼路径的拼接：path.join

如果我们希望将多个路径进行拼接，但是不同的操作系统可能使用的是不同的分隔符；

这个时候我们可以使用path.join函数；

◼拼接绝对路径：path.resolve

path.resolve()方法会把一个路径或路径片段的序列解析为一个绝对路径；

给定的路径的序列是从右往左被处理的，后面每个path被依次解析，直到构造完成一个绝对路径；

如果在处理完所有给定path的段之后，还没有生成绝对路径，则使用当前工作目录；

生成的路径被规范化并删除尾部斜杠，零长度path段被忽略；

如果没有path传递段，path.resolve()将返回当前工作目录的绝对路径；

coderwhy在webpack中的使用

◼在webpack中获取路径或者起别名的地方也可以使用

coderwhy认识webpack

◼事实上随着前端的快速发展，目前前端的开发已经变的越来越复杂了：

比如开发过程中我们需要通过模块化的方式来开发；

比如也会使用一些高级的特性来加快我们的开发效率或者安全性，比如通过ES6+、TypeScript开发脚本逻辑，通过sass、

less等方式来编写css样式代码；

比如开发过程中，我们还希望实时的监听文件的变化来并且反映到浏览器上，提高开发的效率；

比如开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化；

等等….

◼但是对于很多的前端开发者来说，并不需要思考这些问题，日常的开发中根本就没有面临这些问题：

这是因为目前前端开发我们通常都会直接使用三大框架来开发：Vue、React、Angular；

但是事实上，这三大框架的创建过程我们都是借助于脚手架（CLI）的；

事实上Vue-CLI、create-react-app、Angular-CLI都是基于webpack来帮助我们支持模块化、less、TypeScript、打包优化

等的；

coderwhy脚手架依赖webpack

◼事实上我们上面提到的所有脚手架都是依赖于webpack的：