前言

path

Webpack 是由 JS 写成的程序, 会对系统上的文件进行操作, 运行在 Node 环境中, 而 Node 运行在不同的 OS 中 (Linux/MacOS/Windows)

Mac OS、Linux 和 window 上的路径时不一样的

  • window 上会使用 \ 或者 \\ 来作为文件路径的分隔符，当然目前也支持 /
  • 在 Mac OS、Linux 的 Unix 操作系统上使用 / 来作为文件路径的分隔符

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

可移植操作系统接口（英语：Portable Operating System Interface，缩写为 POSIX）

  • Linux 和 Mac OS 都实现了 POSIX 接口
  • Window 部分电脑实现了 POSIX 接口

常见的 Api

从路径中获取信息

  • dirname：获取文件的父文件夹
  • basename：获取文件名
  • extname：获取文件扩展名

路径的拼接：path. join

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

拼接绝对路径：path. resolve

  • path. resolve () 方法会把一个路径或路径片段的序列解析为一个绝对路径
  • 给定的路径的序列是从右往左被处理的，后面每个 path 被依次解析，直到构造完成一个绝对路径
  • 如果在处理完所有给定 path 的段之后，还没有生成绝对路径，则使用当前工作目录
  • 生成的路径被规范化并删除尾部斜杠，零长度 path 段被忽略
  • 如果没有 path 传递段，path. resolve () 将返回当前工作目录的绝对路径

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

Webpack 概述

随着前端的快速发展，目前前端的开发已经变的越来越复杂

  • 模块化的方式来开发
  • 使用一些高级的特性来加快我们的开发效率或者安全性，比如通过 ES6+、 TypeScript 开发脚本逻辑，通过 sass、less 等方式来编写 css 样式代码
  • 实时的监听文件的变化来并且反映到浏览器上，提高开发的效率
  • 将代码进行压缩、合并以及其他相关的优化
  • 等等……

对于开发者来说, 并不需要思考这些问题，日常的开发中根本就没有面临这些问题:

  • 这是因为目前前端开发我们通常都会直接使用三大框架来开发： Vue、 React、 Angular
  • 这三大框架的创建过程我们都是借助于脚手架（CLI）
  • Vue-CLI、 create-react-app、 Angular-CLI 都是基于 webpack 来帮助我们支持模块化、 less、 TypeScript、打包优化等的

Webpack 是什么

Webpack is a static module bundler for modern JavaScript applications.

静态的模块化打包工具，为现代的JavaScript应用程序

  • 打包 bundler：webpack 可以将帮助我们进行打包，所以它是一个打包工具
  • 静态的 static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）
  • 模块化 module：webpack 默认支持各种模块化开发，ES Module、CommonJS、AMD等
  • 现代的 modern：我们前端说过，正是因为现代前端开发面临各种各样的问题，才催生了 webpack 的出现和发展