前端打包工具 —— webpack（一）

76433橘子
235 阅读9分钟

前端打包工具 —— webpack（一）

前端开发模式

以前的开发模式

  • 首先先实现创建我们的 index.html
  • 然后书写我们的 CSS 和 JavaScript 的代码，通过 link 和 script 进行引入
  • 这样之后就构成了我们以前的前端开发

现在的开发模式

  • 首先确定我们实现开发使用的技术栈

  • 然后确定我们项目应该使用的包管理工具 —— npm pnpm cnpm yarn

  • 最后就是搭建我们项目开发使用的架构以及最后实现打包的工具 —— vue脚手架 react脚手架 webpack打包工具 vite打包工具

    • 通过我们的打包工具就可以实现我们的打包为原生的 html CSS JavaScript 的代码
    • 然后再在我们的浏览器实现运行，构成我们的前端开发
    • 这里同时我们需要注意的是我们的这些工具都是在我们的 Node 环境 中才可以使用
    • 同时将我们打包好的工具部署在我们的 静态服务器 中

  • 这个就是我们的 前端工程化开发

Node 中的内置模块 path

path 模块的基本使用

  • path 模块主要就是帮助我们进行处理路径和文件的一个模块

  • path 模块可以帮助获取的一些信息

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

  • path.join()

    • 实现的是将我们的多个路径实现拼接

  • path.resolve() —— 重点

    • 实现的是将返回一个目录的绝对路径

    • 但是这个实现的拼接是从右往左进行拼接，只要形成了我们的绝对路径那就直接停止继续拼接

    • 我们这里可以实现区分的标志就是

      • 只要含有我们的 ./ ../ 的标识符，这个就是我们的相对路径
      • 只要是只是出现的是我们的 / ，那么这个就是我们的 绝对路径
      • 同时为了我们的路径的规范化，在最后的路径末尾含有 /，这个时候就会被删除失效

使用 path 模块的前言

  • 首先我们需要知道的是我们的模块化的开发模式中含有两种很典型的规范

  • 一种就是我们的 commonjs 规范，一种就是我们的 esmodule 规范

    • 实际上的话关于两种开发规范来说的话对我们的 JS 文件的后缀名也是具备一定的要求的

    • commonjs 规范的话，我们的 js 文件名的后缀可以是 .js 也可以是我们的 .cjs

      • 在该规范中有两个十分重要的概念
      • __dirname 实现获取的是当前文件所在的目录路径
      • __filename 实现的是获取的是我们当前文件的路径

    • esmodule 规范的话使用的是我们的 mjs 的后缀名

      • 该开发模式中，我们通过的是使用 import.meta.url 实现获取我们的文件的路径

    • 同时我们的这两种文件后缀名 .cjs 以及 .mjs 文件的话，后面也是一种前端工程化的配置文件的一种形式

      • 不使用 json 文件进行配置的时候，就可以使用这两种后缀名的文件进行我们的配置了

      • 所以说以后只要是看到了我们的以 .cjs 或者说 .js 为后缀的配置文件

        • 那么内部的配置文件使用的导入内置模块的规范，绝对是使用的我们的 commonjs 规范的

  • 说了这些，那么我们该如何控制我们的开发的时候使用什么规范进行开发呐？？？

    • 实现这样的效果就是修改我们的 package.json 文件来调整我们使用的模块化开发的规范

    • type 字段进行控制我们程序中使用的规范是什么

      • commonjs 表示的就是使用 commonjs 的模块化的开发规范
      • module 表示的就是使用我们的 esmodule 模块化规范
// 使用的是 esmodule 模块化规范，这个时候我们的文件后缀名是 .mjs  
​
import * as path from "node:path";  // 实现导入我们的 path 模块
​
// 1.第一种用法
console.log(import.meta.url)  // file:///C:/Users/76433%E6%B0%B4%E9%80%86%E4%BF%A1%E5%B0%81/Desktop/front-practice/demo/src/index.mjs
const extname = path.extname(import.meta.url)  // 获取我们文件的后缀名
const basename = path.basename(import.meta.url)  // 获取我们的文件名
const dirname = path.dirname(import.meta.url)  // 获取的是我们的上一级目录名
console.log(extname, basename, dirname)
​
​
// 2.将我们的多个路径实现拼接
const path01 = "/abc/cba"
const path02 = "../juwenzhang/src/index.html"
console.log(path.join(path01, path02))  // \abc\juwenzhang\src\index.html
​
​
// 3.将我们的多个路径实现拼接，最终返回我们的一个绝对路径
console.log(path.resolve(path02, path02))  // C:\Users\76433水逆信封\Desktop\front-practice\demo\juwenzhang\src\juwenzhang\src\index.html

// 使用的是我们的 commonjs 的模块化开发规范
​
const path = require('path')
​
console.log(__dirname)  // C:\Users\76433水逆信封\Desktop\front-practice\demo\src
console.log(__filename)  // C:\Users\76433水逆信封\Desktop\front-practice\demo\src\index.cjs
​
console.log(path.extname(__filename))  // .cjs
console.log(path.basename(__filename))  // index.cjs
console.log(path.dirname(__filename))  // C:\Users\76433水逆信封\Desktop\front-practice\demo\src
​
console.log(path.join("/abc/aaa/bbb", "../../juwenzhang/src"))  // \abc\juwenzhang\src
​
console.log(path.resolve("/abc/aaa/bbb", "../../juwenzhang/src"))  // C:\abc\juwenzhang\src

为什么学习 webpack

  • 打包工具的出现就是为了便捷我们前端的工程化开发而出现的

  • 通过打包工具可以实现的是我们的加快前端工程化开发的效率以及安全性等问题

  • 实际上的话我们现在的前端主流的三大开发框架 vue react angular 模块化开发都是基于的是 webpack 来实现的

    • 同时其三大框架的脚手架 CLI 也含有其他的打包工具的开发模式
    • 使用打包工具本质上的话还是为了我们的前端代码打包优化的操作

  • 也就是因为我们的很多前端的热门的开发框架中都是用到了我们的 webpack 打包工具

    • 所以说我们需要来学习他！！！这些工具的杰作，我们还真的感谢一些热爱编程，热爱前端开发的开源大佬们的存在
    • 没有他们，真的不敢想现在的前端开发环境究竟是怎样的

  • 同时我们的 webpack 可以帮助我们

    • 实现转化我们的 JS 代码为浏览器可认识的代码
    • 转化我们的 less sass 代码为 CSS
    • 打包静态资源等等功能

image-20241206020745158.png

那么 webpack 究竟是什么呐？？

  • 来自官网的描述，webpack 是一个现代的前端应用的静态模块化的打包工具

    • 为什么是静态：是因为客户端开发工程师们开发的代码都是属于整个程序的静态资源部分，所以说是静态
    • 为什么是模块化呐：是因为我们的 webpack 支持我们实现模块化开发的规范含有: esmodule commonjs AMD CMD
    • 为什么是打包工具呐：因为这个工具帮助我们把文件进行了打包了的，这个解释，额额......词穷啦！！！
    • 为什么是现代呐：因为我们早期的开发模式是不需要这样的打包工具出现的，所以说是现代

image-20241206021349013.png

image-20241206023006870.png

webpack 的安装方式

  • webpack 的安装

    • 当前我们的 webpack 实现安装，我们是需要进行安装一个依赖包的 webpack-cli

    • 为什么也需要安装我们的 webpack-cli 呐

      • 是因为该依赖是为了让我们可以在命令行中识别我们的 webpack

    • 安装方式也是具备两种方式的

      • 一种就是全局安装

        • npm install webpack webpack-cli -g
        • 这样安装之后，我们就可以在全局任意位置使用我们的 webpack 了

      • 另外一种就是我们的局部安装

        • npm install webpack webpack-cli --save-dev | -D

        • 首先我们这里需要明确一点，我们的 webpack 并没有参与我们代码的生产的，所以说这里我们安装在的是我们的

          • 开发环境中，并没有安装在生产环境中

      • 尽量局部安装我们的该工具

        • 首先我们的每一个项目的话，所依赖的 webpack 的版本号不同
        • 然后就是这个包还是挺大的，所以说还是局部安装比较好吧
        • 毕竟我们的项目上传代码托管平台的时候，我们是不需要上传 node_modules 目录的

实现使用 webpack

  • 首先我们需要做的就是先实现对我们的项目进行初始化，生成对应的包管理文件 package.json

    • npm init
    • npm init -y

  • 然后进行安装我们的 webpack webpack-cli

    • npm install webpack webpack-cli -D|--save-dev
    • 进行了这一步操作后，同时生成我们的 package-lock.json 依赖版本锁定文件

  • 开始使用我们的 webpack

    • 在以前的 webpack 版本中，我们的 webpack 默认使用的是我们全局安装的 webpack

    • 但是现在的 webpack 版本中，默认使用的是我们的局部环境中进行安装的 webpack

    • 但是为了能够保证一直使用的是我们局部的 webpack

      • 建议大家在使用 webpack 命令行的时候，前面添加我们的 npx 字段，保证使用的是我们的局部中的 webpack

    • npx webpack 就可以实现打包我们的文件了

      • 打包后的代码产生的目录是 dist 目录
      • 该目录也是我们后面进行项目部署需要部署的打包代码了

    • 但是这样默认的打包是有一个前提的

      • 就是我们的项目，含有我们 webpack 默认的文件名 index.js
      • 但是后面我们后面是可以通过 webpack 的配置文件来进行修改的

  • 配置文件名就是我们的 webpack.config.js

    • module.exports = {
    entry: './src/main.cjs',  // 指定我们打包的入口文件
    output: {  // 指定我们的输出路径以及输出文件名
        path: __dirname,  // 这里必须是绝对路径 path.resolve(__dirname, "./dist")
        filename: 'main.cjs.js'
    },
    mode: 'development'  // 指定是生产模式还是开发模式
}

    • 这个时候就可以实现我们的将原本的代码进行自定义的打包了

    • 注意我们的 webpack 运行的地方是 Node 环境中的，所以说建议使用我们的 commonjs 的开发规范来实现

    • npm webpack 直接根据我们的 webpack.config.js | webpack.config.cjs 来实现我们的打包了

    • npm webpack --config webpack.config.js 来实现指定我们打包所依据的规范是什么，这样后配置文件名可以不是

      • webpck.config 进行命名了

    • 同时我们是可以将我们的该命令配置到我们的 package.json 中的

      • {
  "name": "demo_practise",
  "version": "1.0.0",
  "description": "a demo dir",
  "main": "main.cjs",
  "type": "commonjs",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "npx webpack --config webpack.config.cjs",
    "start": "node src/index.js"
  },
  "dependencies": {
    "demo_practise": "^1.0.0"
  },
  "devDependencies": {
    "webpack": "^5.96.1",
    "webpack-cli": "^5.1.4"
  },
  "keywords": [
    "demo"
  ],
  "author": "juwenzhang",
  "license": "ISC"
}
      • 随后执行我们的 npm run build 即可实现打包我们的项目了
      • 出现了 successfully 就可以说明我们的打包已经成功

image-20241206032318927.png

总结

  • 该部分，我们初略地体验了 webpack 打包工具
  • 同时也认识到了关于 path 模块地使用
  • 以及补充了相关 commonjs 以及 esmodule 模块化开发地更多细节性地问题
  • 同时最后我们实现编写了属于自己的脚本来实现打包我们的代码
avatar
文章
阅读
粉丝