打包工具之Webpack篇(一) | 青训营笔记

Tomtu
151 阅读6分钟

这是我参与第四届青训营笔记创作活动的第八天

前言

暑假的学习计划里面老早就装了打包工具——重点了解关于Webpack的知识，然后其他三个比较热门的打包工具暂时简单认识一下。好巧不巧，青训营的课程刚好就有关于打包工具的内容，而且在Webpack这里还是范文杰老师！始于师兄的推荐，震撼于文杰老师关于Webpack的文章与小册，最后在听课期间完全信服。冲着这，怎么着也得一直支持同潮汕老乡的范文杰老师。

这里请允许我先贴一下老师的Webpack专栏链接：精通Webpack核心原理。 不过对我现在的我来说，尝试看了两篇，真的熬不住啊，内容太厉害了我还是脚踏实地从入门开始吧。

image.png 图源范文杰老师

为什么需要打包工具？

开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行。所以我们需要打包工具帮我们做完这些事。除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。

常见的打包工具

  • Grunt
  • Gulp
  • Parcel
  • Webpack
  • Rollup
  • Vite

目前市面上最流量的是 Webpack，所以我们会先整理Webpack相关知识，随后整理Vite, esbuild以及parcel。

Webpack

Webpack是本质上是一种前端资源编译、打包工具,它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去,输出的文件就是编译好的文件，就可以在浏览器段运行了,我们将 Webpack 输出的文件叫做 bundle。它支持Babel, Eslint, TS, CoffeScript, Less, Sass, 支持模块化处理css、图片等资源文件，支持HMR+开发服务器，支持持续监听、持续构建，支持代码分离，支持Tree-shaking，支持Sourcemap...

image.png


初步了解webpack

首先搞一个项目文件大概列表出来

webpack_code # 项目根目录（所有指令必须在这个目录运行）
    └── src # 项目源码目录
        ├── js # js文件目录
        │   ├── 文件1.js
        │   └── 文件2.js
        └── main.js # 项目主文件

安装

打开终端，来到项目根目录。运行以下指令：

首先，初始化package.json

npm init -y

此时会生成一个基础的 package.json 文件。

注意 package.json 中 name 字段不能叫做 webpack, 否则下一步会报错。

接着，下载依赖

npm i webpack webpack-cli -D

编辑配置文件

webpack.config.js文件

module.exports={
    entry:'main.js',//入口文件（主文件）
    output:{
        filename:"[name].js",
        path:path.join(__dirname,"./dist"),//输出路径
    },
    module:{
        rules:[{
            test:/\.less$/i,//配对.less结尾文件
            use:['style-loader','css-loader','less-loader']
        }]
    }
}

其实现在不必过多纠结，后面就知道这些是干嘛的了。为了简单用一下webpack，我们再创建几个文件，比如：

count.js

export default function count(x,y){
    return x-y;
}

sum.js

export default function sum(...args){
    return args.reduce((p,c)=>p+c,0)
}

main.js

import count from "./js/count";
import sum from "./js/sum";
console.log(count(2,1),sum(1,2,3,4));

执行编译命令

npx webpack

这里其实还分两种模式

  • 开发模式
npx webpack ./src/main.js --mode=development
  • 生产模式
npx webpack ./src/main.js --mode=production

这里的npx webpack: 是用来运行本地安装 Webpack 包的。./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。--mode=xxx：指定模式（环境）。

5 大核心概念及核心流程

  1. entry（入口）

指示 Webpack 从哪个文件开始打包

  1. output（输出）

指示 Webpack 打包完的文件输出到哪里去，如何命名等

  1. loader（加载器）

webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析

  1. plugins（插件）

扩展 Webpack 的功能

  1. mode（模式）

主要由两种模式：

  • 开发模式：development
  • 生产模式：production

image.png

而且其实其中存在递归调用2、3，直到所有资源处理完毕。

观察输出文件

默认 Webpack 会将文件打包输出到 dist 目录下，我们查看 dist 目录下文件情况就好了。

使用Webpack

关于 Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类:

  • 流程类:作用于流程中某个 or 若干个环节，直接影响打包效果的配置项
  • 工具类:主流程之外，提供更多工程化能力的配置项。

配置总览

image.png

处理样式资源

处理 Css 资源

1. 下载包

npm i css-loader style-loader -D

注意：需要下载两个 loader

2. 功能介绍

  • css-loader：负责将 Css 文件编译成 Webpack 能识别的模块
  • style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容

此时样式就会以 Style 标签的形式在页面上生效

3. 配置

image.png

4. 添加 Css 资源

首先随便搞一个css文件，比如src/css/index.css

image.png

然后在src/main.js引入

image.png

再随便写个html例如public/index.html并引入打包文件

image.png

最后运行指令npx webpack，打开 index.html 页面查看效果。

处理Less资源

同理可得 下载-->配置-->引入-->应用

1. 下载包

npm i less-loader -D

less-loader：负责将 Less 文件编译成 Css 文件

2. 配置

image.png

接下来的跟处理css流程一样，相信大家都会！

处理 Sass 和 Scss 资源

1. 下载包

npm i sass-loader sass -D

注意：需要下载两个

  • sass-loader：负责将 Sass 文件编译成 css 文件
  • sass：sass-loader 依赖 sass 进行编译

2. 配置

image.png

接下来同上

处理 Styl 资源

1. 下载包

npm i stylus-loader -D
  • stylus-loader：负责将 Styl 文件编译成 Css 文件

2. 配置

image.png

后续同上

处理图片资源

过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理。现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源。

1. 配置

image.png 接着就是添加图片资源并使用

2. 输出资源情况

此时如果查看 dist 目录的话，会发现多了三张图片资源。因为 Webpack 会将所有打包好的资源输出到 dist 目录下。

但是为什么样式资源没有呢？

因为经过 style-loader 的处理，样式资源打包到 main.js 里面去了，所以没有额外输出出来。

3. 对图片资源进行优化

我们还可以优化，将小于某个大小的图片转化成 data URI 形式（Base64 格式）

image.png

  • 优点：减少请求数量
  • 缺点：体积变得更大

此时输出的图片文件就只有两张，有一张图片以 data URI 形式内置到 js 中了 （注意：需要将上次打包生成的文件清空，再重新打包才有效果）

问题1

  • Loader 有什么作用?为什么这里需要用到css-loader、style-loader
  • 与旧时代-在HTML 文件中维护css 相比，这种方式会有什么优劣处?
  • 有没有接触过 LessSassStylus 这一类CSS 预编译框架?如何在Webpack接 跳入这些工具?

参考资料:

最后留下一点问题，咱明天再见！最后的最后，谢谢大家这么厉害还来看我，如果发现问题或者需要补充的点麻烦大家通过评论告诉我。博取众长，共同进步！

avatar
文章
阅读
粉丝