^-^
笔记 | WebPack
字数总计：5.7k   |   阅读估时：23分钟

webpack的官方文档 https://webpack.js.org/
webpack的中文官方文档 https://webpack.docschina.org/

Webpack.png

认识Webpack

介绍

image-20230228090418.png

假设我们现在在做vue项目，那么我们需要加载哪些文件？

JavaScript的打包：

  • 将ES6转换成ES5的语法；
  • TypeScript的处理，将其转换成JavaScript；

Css的处理：

  • CSS文件模块的加载、提取；
  • Less、Sass等预处理器的处理；

资源文件img、font：

  • 图片img文件的加载；
  • 字体font文件的加载；

HTML资源的处理：打包HTML资源文件；
处理vue项目的SFC文件.vue文件；

1
2
title:webpack到底是如何对我们的项目进行打包的呢？
事实上webpack在处理应用程序时，它会根据命令或者配置文件找到入口文件；从入口开始，会生成一个 依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（比如.js文件、css文件、图片、字体等）；然后遍历图结构，打包一个个模块（根据文件的不同使用不同的loader来解析）；

安装

webpack的安装目前分为两个：webpack、webpack-cli

它们的关系：

执行webpack命令，会执行node_modules下的.bin目录下的webpack；webpack在执行时是依赖webpack-cli的，如果没有安装就会报错；而webpack-cli中代码执行时，才是真正利用webpack进行编译和打包的过程；

所以在安装webpack时，我们需要同时安装webpack-cli（第三方的脚手架事实上是没有使用webpack-cli的，而是类似于自己的vue-service-cli的东西）

image-20230228090818.png

1
2
npm install webpack webpack-cli –g # 全局安装
npm install webpack webpack-cli –D # 局部安装
1
在实际开发中我们通常使用**局部安装**的webpack

安装之后可以直接使用npx webpack进行打包，但是这种打包方式有弊端——根目录下必须有一个src文件夹.

指定配置文件

配置文件可以指定webpack打包的根目录，也可以指定生成的目录等

配置文件的名字是webpack.config.js放在项目根目录中，和node_modules同级

在这个文件中导出node模块

1
2
3
4
5
6
7
8
9
10
11
12
const path = require('path')

module.exports = {
  // 打包的入口
  entry: './src/main.js',
  // 输出设置
  output:{
    filename: 'bundle.js',
    // path必须传入一个绝对路径，我们把目标路径和绝对路径拼接
    path: path.resolve(__dirname, "./build")
  }
}

如果我们的webpack配置文件是别的名字，可以从脚本里面设置script，指定参数运行webpack

修改配置文件为 pack.config.js

package.json文件

1
2
3
4
5
6
7
8
9
10
11
12
{
  "name": "test",
  "version": "1.0.0",
  "description": "test project",
  "scripts": {
    "build": "webpack --config config.js"
  },
  "devDependencies": {
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  }
}

然后可以直接运行 npm run build 直接使用指定文件打包

Node的path模块

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

我们知道在Mac OS、Linux和window上的路径是不一样的：window上会使用 \或者 \ 来作为文件路径的分隔符，当然目前也支持 /；在Mac OS、Linux的Unix操作系统上使用 / 来作为文件路径的分隔符；

那么如果我们在window上使用 \ 来作为分隔符开发了一个应用程序，要部署到Linux上面应该怎么办呢，显示路径会出现一些问题，所以为了屏蔽他们之间的差异，在开发中对于路径的操作我们可以使用 path 模块；

==获取路径中的信息==

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

1
2
3
4
5
6
7
8
9
10
11
12
const path = require('path')

const filepath = 'C://dir1/dir2/dir3'

// 从路径中获取信息
console.log(path.extname(filepath))

// 获取文件名
console.log(path.basename(filepath))

// 获取文件夹所在路径
console.log(path.dirname(filepath))

==路径的拼接==

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

1
2
3
4
// 将多个路径拼接在一起
const path1 = '/aaa/bbb'
const path2 = '../nodejs'
console.log(path.join(path1, path2))

==绝对路径的拼接==

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

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

1
2
3
4
5
6
7
8
9
10
11
const path = require('path')

// 多个路径拼接在一起，最后返回一个绝对路径

// 从后向前查找，直到查找到绝对路径

console.log(path.resolve("./abc/test", "/root/", "/a.txt"))
console.log(path.resolve("./abc/test", "/root/", "a.txt"))
console.log(path.resolve("/abc/test", "root/", "a.txt"))
console.log(path.resolve("./abc/test", "root/", "a.txt"))

image-20230228090007.png

使用Webpack进行打包

打包

依赖图：

image-20230228095220.png

1
在使用webpack进行打包的时候，在js中只引入文件构建依赖图，而不导入资源，可以直接使用 `import "path"的形式`

main.js

1
import "./components/add_div.js"

css/div.css

1
2
3
4
5
.content{
  width: 200px;
  height: 200px;
  background-color: aqua;
}

components/add_div.js

1
2
3
4
5
6
7
import "../css/div.css"

const divEl = document.createElement('div')

divEl.textContent = 'Hello World!'
divEl.classList.add('content')
document.body.append(divEl)

执行命令 npm run build进行打包

image-20230228100004.png

上面的错误信息告诉我们需要一个loader来加载这个css文件，但是loader是什么呢？loader 可以用于对模块的源代码进行转换；

我们可以将css文件也看成是一个模块，我们是通过import来加载这个模块的；

在加载这个模块时，webpack其实并不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能；

那么我们需要一个什么样的loader呢？
对于加载css文件来说，我们需要一个可以读取css文件的loader，这个loader最常用的是css-loader；

css-loader安装

css-loader的安装：

1
npm install css-loader -D

如何使用css-loader?

  1. 内联方式；
  2. CLI方式（webpack5中不再使用）；
  3. 配置方式；

我们只讲配置方式，其他方式基本已经不再使用。

配置方式表示的意思是在我们的webpack.config.js文件中写明配置信息：

  • module.rules中允许我们配置多个loader（因为我们也会继续使用其他的loader，来完成其他文件的加载）；
  • 这种方式可以更好的表示loader的配置，也方便后期的维护，同时也让你对各个Loader有一个全局的概览；

module.rules的配置如下：

  • rules属性对应的值是一个数组：[Rule]
  • 数组中存放的是一个个的Rule，Rule是一个对象，对象中可以设置多个属性：
    • test属性：用于对 resource（资源）进行匹配的，通常会设置成正则表达式；
    • use属性：对应的值是一个数组：[UseEntry]
      • UseEntry是一个对象，可以通过对象的属性来设置一些其他属性
      • loader：必须有一个 loader属性，对应的值是一个字符串；
      • options：可选的属性，值是一个字符串或者对象，值会被传入到loader中；
      • query：目前已经使用options来替代；
      • 传递字符串（如：use: [ 'style-loader' ]）是 loader 属性的简写方式（如：use: [ { loader: 'style-loader'} ]）；
    • loader属性： Rule.use: [ { loader } ] 的简写。

image-20230228101737.png

然后 npm run build构建项目

image-20230228101836.png

构建成功

打开src/index.html查看文件

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
  <body></body>
  <script src="../build/bundle.js"></script>
</html>
1
注意：这里的script引入应该在body之后，以防引入js的时候，body还没有加载出来导致错误

image-20230228102523.png

我们已经可以通过css-loader来加载css文件了，但是你会发现这个css在我们的代码中并没有生效（页面没有效果）。

这是为什么呢？

因为css-loader只是负责将.css文件进行解析，并不会将解析之后的css插入到页面中；如果我们希望再完成插入style的操作，那么我们还需要另外一个loader，就是style-loader；

style-loader安装

安装style-loader：

1
npm install style-loader -D

配置style-loader

那么我们应该如何使用style-loader：

  • 在配置文件中，添加style-loader

注意：因为loader的执行顺序是从右向左（或者说从下到上，或者说从后到前的），所以我们需要将style-loader写到css-loader的前面；

image-20230228102736.png

如下，这样就可以了

image-20230228102743.png

less工具

安装less-loader工具

1
npm install less-loader -D

css/title.less

1
2
3
4
5
6
7
@fontsize: 50px;
@fontColor: blue;

.title{
  font-size: @fontsize;
  color: @fontColor;
}

add_div.js

1
2
3
4
5
6
7
8
9
10
11
12
13
import "../css/div.css"
import "../css/title.less"

const divEl = document.createElement('div')
divEl.textContent = 'Hello World!'
divEl.classList.add('content')
document.body.append(divEl)

// 新增
const titleEl = document.createElement('div')
titleEl.textContent = 'TITLE'
titleEl.classList.add('title')
document.body.append(titleEl)
1
一定不要忘了引入less文件

config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const path = require('path')

module.exports = {
  // 打包的入口
  entry: './src/main.js',
  // 输出设置
  output:{
    filename: 'bundle.js',
    // path必须传入一个绝对路径，我们把目标路径和绝对路径拼接
    path: path.resolve(__dirname, "./build")
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // 多个loader不需要其他属性的时候可以直接写loader字符串数组的形式
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  }
}

成果如图：

image-20230228104845.png

Post-css工具

1
我们在开发的时候基本上不适用 autoprefixer，而是使用post-preset-env

假设我们要设置css属性： user-select: none，该属性的作用是，用户鼠标悬浮在元素上的时候不显示任何交互动作（文字不能被选中和复制），但是这个属性在不同的浏览器中的设置是不一样的，比如 -ms-user-select:none，--webkit-user-select:none

我们需要一个工具，当我们设置了这个元素之后，自动帮我们添加上在不同浏览器上的属性，这个工具就是postcss（的autoprefixer插件）

安装post-css

1
npm install postcss-loader -D

整合配置的post-css

webpack.config.js

安装autoprefixer插件

1
npm install autoprefixer -D
1
2
3
4
5
6
7
8
9
10
11
12
13
14
use: [
  'style-loader', 
  'css-loader',
  {
	loader: 'postcss-loader',
	options: {
	  postcssOptions: {
		plugins: [
		  require('autoprefixer')
		]
	  }
	}
  }
]

image-20230228122716.png

div.css

1
2
3
4
5
6
.content{
  width: 200px;
  height: 200px;
  background-color: aqua;
  user-select: none;
}

css中只写了一个user-select，但是构建完成的网站中显示如下：

image-20230228122908.png

单独配置的post-css文件

webpack.config.js 中

image-20230228123111.png

另外在根目录创建文件 postcss.config.js

1
2
3
4
5
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

同理

image-20230228123304.png

postcss-preset-env

事实上，在配置postcss-loader时，我们配置插件并不需要使用autoprefixer。我们可以使用另外一个插件：postcss-preset-env

postcss-preset-env也是一个postcss的插件，它可以帮助我们将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境添加所需的polyfill；也包括会自动帮助我们添加autoprefixer（所以相当于已经内置了autoprefixer）；

首先，我们需要安装postcss-preset-env：

1
npm install postcss-preset-env -D

直接在postcss.config.js 中引入插件

1
2
3
4
5
module.exports = {
  plugins: [
    require('postcss-preset-env')
  ]
}

效果是一样的

image-20230228123635.png

WebPack 打包 Img

打包图片

加载图片有两种方式：

  1. img元素，设置src属性；
  2. 其他元素（比如div），设置background-image的css属性；

以前打包图片需要自己安装file-loader，但是现在用不着了，因为已经webpack已经为我们内置了。但是如果我们直接把图片import进来，会导致webpack把他认为是一个js模块，因此我们应该进行相应的配置来告诉webpack。

1
2
3
4
{
  test: /\.(png|jpe?g|gif|svg)$/,
  type: "asset"
}

image-20230228125300.png

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

  • asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现；
  • asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现；
  • asset/source 导出资源的源代码。之前通过使用 raw-loader 实现；
  • asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现；

测试：

拷贝一张图片到img中

add_div.js中新增

错误示范

1
2
3
4
// 新增图片
const imgEl = document.createElement('img')
imgEl.src = '/src/img/bird.png' //  不能这样写，这样写是直接定死的字符串，而不是资源的引用
document.body.append(imgEl)

正确示范

1
2
3
4
5
6
import bird from "../img/bird.png"

// 新增图片
const imgEl = document.createElement('img')
imgEl.src = bird
document.body.append(imgEl)

直接构建项目,成功

image-20230228125848.png

三种解释资源类型的解释

1
asset/source 在开发中基本不适用，因此不解释了

add_div.js

增加一个小图片

1
2
3
4
5
// 新增图片2
import dog from "../img/dog.png"
const imgEl1 = document.createElement('img')
imgEl1.src = dog
document.body.append(imgEl1)

==asset/resource==

修改资源类型

image-20230228132548.png

重新构建

image-20230228133547.png

image-20230228133604.png

可以看到资源都指向了新生成的图片

因此这个方法是打包两张图片，每张图片都有自己的地址，并把网页中的地址自己的地址（新图片是用哈希算法生成的）

优点：js文件比较小，容易加载
缺点：需要多次发送请求，向服务器请求图片

==asset/inline==

修改资源类型

image-20230228133756.png

重新构建

image-20230228133835.png

可以看到图片使用base64编码进行内置到了元素里面。

同时js文件变得更大了（存储了图片的编码）

优点：不需要多次发送请求，向服务器请求图片
缺点：js文件比较大，不容易加载

==asset==

修改成asset之后

image-20230228134130.png

可以看见对于大图片，构建生成了新的图片并指向链接，而对于小图片，生成了base64编码提高了加载速度，大小图片的区分是有一个临界值的。

这个临界值，当然是可以自定义的：

webpack.config.js

1
2
3
4
5
6
7
8
9
{
	test: /\.(png|jpe?g|gif|svg)$/,
	type: "asset",
	parser: {
	  dataUrlCondition: {
		maxSize: 50 * 1024 // 设置50KB为临界值
	  }
	}
  }

image-20230228134439.png

自定义输出文件的名称和路径

==针对图片路径：==

1
2
3
4
5
6
7
8
9
10
11
12
 {
test: /\.(png|jpe?g|gif|svg)$/,
type: "asset",
generator: {
  filename: "img/[name].[hash:6].[ext]"
},
parser: {
  dataUrlCondition: {
	maxSize: 50 * 1024 // 设置50KB为临界值
  }
}
 }
  • [ext]： 处理文件的扩展名；
  • [name]：处理文件的名称；
  • [hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）；

"img/[name].[hash:6].[ext]" 表示生成的文件放在img文件夹下面，文件名是原名.6位哈希加上原来的后缀名。

构建之后：

image-20230228135227.png

==针对所有资源路径：==

修改output，添加assetModuleFilename属性；

1
2
3
4
5
6
output:{
  filename: 'bundle.js',
  // path必须传入一个绝对路径，我们把目标路径和绝对路径拼接
  path: path.resolve(__dirname, "./build"),
  assetModuleFilename: "img/[name].[hash:6].[ext]"
},

image-20230228135154.png

Babel

1
我们在开发的时候基本上不适用 autoprefixer，而是使用post-preset-env

Babel是一个工具链，主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为向后兼容版本的JavaScript；包括：语法转换、源代码转换等

默认打包的时候，如果自己写的是es6，那么打包之后的代码也是es6代码，如果想要将es6的代码转化为es5的代码，应该使用babel

命令行直接使用

image-20230228140946.png

Babel配置方法和PostCSS极其相似。

首先安装babel-loader

@babel/core是babel的核心代码，必须安装；
@babel/cli是命令行使用babel的工具

1
2
npm install @babel/cli @babel/core -D
npm i babel-loader -D

方法一二：整合配置、抽取文件配置同postcss

平时基本不用，略

image-20230228141005.png

方法三：使用预设单独配置【推荐】

1
npm install @babel/preset-env -D

webpack.config.js 中

1
2
3
4
{
  test: /\.js$/,
  use: ['babel-loader']
}

image-20230228141619.png

另外在根目录创建文件 babel.config.js

1
2
3
4
5
module.exports = {
  presets: [
    "@babel/preset-env"
  ]
}

进行构建

image-20230228143959.png

变成了ES5的语法（const变成了var）

Vue

在src中创建文件夹src/vue_demo，创建文件App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
  <div>
    <h2 class="title">{{ title }}</h2>
    <p class="content">this is content...</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      title: "Title"
    }
  }
}
</script>

<style>
.title{
  color: red;
  font-weight: 800;
}
.content{
  color: grey;;
}
</style>

安装vue框架，因为开发和生产环境都要用到，因此直接安装

1
npm install vue

安装webpack进行解析的loader并配置

1
npm install vue-loader

webpack.config.js

vue项目比较特殊，需要引入一个插件：VueLoaderPlugin

1
2
3
4
5
6
7
8
9
10
11
12
const {VueLoaderPlugin} = require('vue-loader/dist/index')

//....
      {
        test: /\.vue$/,
        use: [ "vue-loader"]
      },
//....

plugins: [
    new VueLoaderPlugin()
  ]

image-20230228151636.png

main.js 中引入vue

1
2
3
4
import { createApp } from "vue";
import App from "./vue_demo/App.vue"

createApp(App).mount('#app')

index.html中创建挂载点

1
2
3
<body>
  <div id="app"></div>
</body>

项目构建

1
npm run build

image-20230228151715.png

成功

resolve模块解析

resolve用于设置模块如何被解析：

  • 在开发中我们会有各种各样的模块依赖，这些模块可能来自于自己编写的代码，也可能来自第三方库；
  • resolve可以帮助webpack从每个 require/import 语句中，找到需要引入到合适的模块代码；
  • webpack 使用 enhanced-resolve 来解析文件路径；

webpack能解析三种文件路径

绝对路径

  • 由于已经获得文件的绝对路径，因此不需要再做进一步解析。

相对路径

  • 在这种情况下，使用 import 或 require 的资源文件所处的目录，被认为是上下文目录；
  • 在 import/require 中给定的相对路径，会拼接此上下文路径，来生成模块的绝对路径；

模块路径

  • 在 resolve.modules中指定的所有目录检索模块；
  • 默认值是 ['node_modules']，所以默认会从node_modules中查找文件；
  • 我们可以通过设置别名的方式来替换初识模块路径，具体后面讲解alias的配置；

webpack如何确认你写的路径是文件还是文件夹

如果是一个文件：

  • 如果文件具有扩展名，则直接打包文件；
  • 否则，将使用 resolve.extensions选项作为文件扩展名解析；

如果是一个文件夹：

  • 会在文件夹中根据 resolve.mainFiles配置选项中指定的文件顺序查找；
  • resolve.mainFiles的默认值是 [‘index’]；
  • 再根据 resolve.extensions来解析扩展名；

extensions和alias配置

extensions是解析到文件时自动添加扩展名：

  • 默认值是 ['.wasm', '.mjs', '.js', '.json']
  • 所以如果我们代码中想要添加加载 .vue 或者 jsx 或者 ts 等文件时，我们必须自己写上扩展名；

另一个非常好用的功能是配置别名alias：

  • 特别是当我们项目的目录结构比较深的时候，或者一个文件的路径可能需要 ../../../这种路径片段；
  • 我们可以给某些常见的路径起一个别名；
1
2
3
4
5
6
resolve: {
  extensions: ['.js', '.json', '.jsx', '.vue', '.tx', '.tsx'],
  alias: {
    '@':path.resolve(__dirname, "./src"),
  }
},

image-20230228153258.png

Webpack搭建本地服务器

Webpack搭建本地服务器

目的：

  • 我们希望可以做到，当文件发生变化时，可以自动的完成 编译 和 展示；
  • 我们希望在不适用live-server的情况下，可以具备live reloading（实时重新加载）的功能；

webpack提供的方法：

  • webpack watch mode；
  • webpack-dev-server（常用）；
  • webpack-dev-middleware；

安装webpack-dev-server

1
npm install webpack-dev-server -D

打包好的东西不会放在磁盘中，不会写文件，而是直接放在内存中。

开启本地服务器

命令行为 webpack serve

在package.json中添加相关启动命令

image-20230228183547.png

启动成功

image-20230228183633.png

报错，要设置mode

image-20230228183727.png

在config文件中设置mode

image-20230228183907.png

再次启动，成功

image-20230228183851.png

HMR热模块替换

什么是HMR呢？

  • HMR的全称是Hot Module Replacement，翻译为模块热替换；
  • 模块热替换是指在 应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面；

HMR通过如下几种方式，来提高开发的速度：

  • 不重新加载整个页面，这样可以保留某些应用程序的状态不丢失；
  • 只更新需要变化的内容，节省开发的时间；
  • 修改了css、js源代码，会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式；

如何使用HMR呢？

  • 默认情况下，webpack-dev-server已经支持HMR，我们只需要开启即可（默认已经开启）；
  • 在不开启HMR的情况下，当我们修改了源代码之后，整个页面会自动刷新，使用的是live reloading；

image-20230228185058.png

hot设置为true即可

image-20230228185129.png

有一个问题：在开发其他项目时，我们是否需要经常手动去写入 module.hot.accpet相关的API呢？

  • 比如开发Vue、React项目，我们修改了组件，希望进行热更新，这个时候应该如何去操作呢？

事实上社区已经针对这些有很成熟的解决方案了：

  • 比如vue开发中，我们使用vue-loader，此loader支持vue组件的HMR，提供开箱即用的体验；
  • 比如react开发中，有React Hot Loader，实时调整react组件（目前React官方已经弃用了，改成使用react-refresh）；

devServer配置

host默认是localhost，如果希望其他地方也可以访问，可以设置为 0.0.0.0

port设置监听的端口，默认情况下是8080

open是否打开浏览器：

  • 默认值是false，设置为true会打开浏览器；
  • 也可以设置为类似于 Google Chrome等值；

compress是否为静态文件开启gzip compression：

  • 默认值是false，可以设置为true；

image-20230228185320.png

2023-02-28

上一篇：笔记 | Vue2.x 下一篇：笔记 | Django
Change And Challenge