🖥️ Node.js专栏：Node.js 初级知识 Webpack打包图片-Js-Vue
🧑‍💼 个人简介：一个不甘平庸的平凡人🍬

✨ 个人主页：CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️

---

目录

1 Webpack打包图片

加载图片案例准备

认识asset module type

Asset module type的使用

url-loader的limit效果

2 Webpack打包JS代码

为什么需要babel?

Babel命令行使用

插件的使用

Babel的预设preset

3 Babel和babel-loader

Babel-preset

4 Webpack打包Vue

编写App.vue代码

App.vue的打包过程

@vue/compiler-sfc

5 resolve模块解析

确实 文件还是文件夹

extensions和alias配置

---

1 Webpack打包图片

加载图片案例准备

JavaScript // 引入图片模块 import zznhImage from "../img" // 创建img元素 const imgEL = document.createElement('img') imgEL.src = zznhImage document.body.append(imgEL)

比较常用的使用图片的方式是两种:

img元素,设置src属性

其他元素(如div),设置 background-image的css属性;

认识asset module type

我们当前使用的webpack版本是webpack5:

在webpack5之前,加载这些资源我们需要 使用一些loader 如 law-loader url-loader

在webpack5开始,我们可以直接使用 资源模块类型(asset module type)来替代上面这些loader

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

asset/resource 发送一个单独的文件并导出URL

之前通过使用file-loader实现

asset/inline 导出一个资源的data URL

之前通过使用 url-loader实现

asset/source 导出资源的源代码

之前通过使用raw-loader实现

Asset 在导出一个 data URI 和发送一个单独的文件之间自动选择

之前通过使用url-loader 并且配置资源体积限制实现

Asset module type的使用

如 加载图片 我们可以使用下面的方式

JavaScript {     test:/\.(png|svg|jpe?g|gif)$/ }

但是 如何可以自定义文件的输出路径和文件名呢?

一:修改output,添加assetMouduleFilename属性(比较少)

JavaScript output:{         assetModuleFilename:"abc.png" },

二:在Rule中 添加一个generator属性,并且设置fulename

JavaScript generator:{     // 占位符     // name:指向原来的图片名称     // ext: 扩展名     // hash 哈希值 webpack生成的hash值     filename:"[name]_[hash:8].[ext]" }

介绍几个常用的placeholder:

[ext]:处理文件的扩展名

[name]: 处理文件的名称

[hash]: 文件的内容 使用MD4的散列函数处理,生成一个128位的hash值(32个十六进制)

url-loader的limit效果

开发中 往往是 小的图片需要转换,但是大的图片直接使用图片即可

因为 小的图片转换base64之后可以和页面一起被请求,减少不必要的请求过程,

而 大的图片也进行转换,反而会影响页面的请求速度

我们需要两个步骤来实现:

一:将type修改为asset

二:添加一个parser属性 指定dataUrl条件 添加maxSize属性

2 Webpack打包JS代码

为什么需要babel?

事实上, 在开发中 很少直接去接触babel 但是babel对于前端开发来说 目前是不可缺少的一部分:

开发中 我们想要使用ES6+的语法 想要使用TS 开发React项目 它们都离不开babel的

所以,学习babel对于 理解代码从编写到线上的转变过程 至关重要;

Babel到底是什么?

babel是一个 工具链 主要用于 旧浏览器或者环境中将ECMAScript2015+代码转换为向后兼容版本的Js; 包括 语法转换 源代码转换等

JavaScript [1,2,3].map((n)=>n+1) [1,2,3].map(function(n){     return n+1 })

Babel命令行使用

babel本身可以作为  一个独立的工具 不和webpack等构建工具配置来单独使用

如果我们希望在命令行尝试使用babel 需要安装如下库:

@babel/core: babel的核心代码,必须安装

@babel/cli: 可以让我们在命令行使用babel

JavaScript npm install @babel/cli @babel/core -D

使用babel来处理我们的源代码

src:是源文件的目录

--out-dir:指定要输出的文件夹dist;

JavaScript npx babel src --out-dir dist;

插件的使用

我们需要转换箭头函数 那么我们就可以使用箭头函数转换相关的函数:

JavaScript npm install @babel/plugin-transform-arrow-functions -D npm babel src --out-dir dist --plugin=@babel/plugin-transform-arrow-functions

查看转换后的结果: 发现 const并没有转换成var

因为plugin-transform-arrow-functions并没有提供这样的功能

需要使用plugin-transform-block-scoping来完成这样的功能

JavaScript npm install @babel/plugin-transform-block-scoping -D npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions

Babel的预设preset

如果要转换的内容过多,一个个设置比较麻烦,我们可以使用预设(preset)

安装@babel/preset-env预设:

JavaScript npm install @babel/preset-env -D

执行如下命令:

JavaScript npx babel src --out-dir dist --presets=@babel/preset-env

3 Babel和babel-loader

babel-loader

我们通常会在构建工具中通过配置babel来对其进行使用 如 webpack中

我们就需要去安装相关依赖:

如果之前已经安装了@babel/core,那么这里不需要再安装

JavaScript npm install babel-loader -D

我们可以设置一个规则,在加载js文件时,使用我们的babel

JavaScript module:{     rules:[         {             test:/\.m?js$/,             use:{                 loader:"babel-loader"             }         }     ] }

Babel-preset

webpack根据我们的预设来加载对应的插件列表 讲其传递给babel

如常见的预设有三个:

Env

React

TypeScript

安装preset-env:

JavaScript npm install @babel/preset-env ========================== {     test:/\.m?js$/,     use:{         loader:"babel-loader",         options:{             presets:[                 ["@babel/preset-env"]             ]         }     } }

4 Webpack打包Vue

编写App.vue代码

在开发中 会编写Vue相关代码.webpack可以对vue代码进行解析

JavaScript <template>     <div>         <!-- html -->         <h2 class="title">{{title}}</h2>         <p class="content">我是内容,哈哈哈哈哈哈</p>     </div> </template> <script>     export default {         data(){             return {                 title:"我是vue标题"             }         }     } </script> <style>     .title {         color: blue;         font-size: 100px;     }     .content {         color: red;         font-size: 30px;     } </style>

JavaScript import {createApp} from "..." inmprt App from './vue/...' // Vue代码 createApp(App).mount("#app")

App.vue的打包过程

我们需要vue-loader:

JavaScript npm install vue-loader -D

在webpack的模版规则中进行配置

JavaScript {     test:/\.vue$/,     loader:"vue-loader" }

@vue/compiler-sfc

打包依然会报错,因为我们必须添加@vue/compiler-sfc来对template进行解析

JavaScript npm install @vue/compiler-sfc -D

另外我们需要配置对应的Vue插件:

JavaScript const {VueLoaderPlugin} = require('vue-loader/dist/index') ------------------------------------------------------------ new VueLoaderPlugin()

重新打包即可支持App.vue的写法

另外 我们也可以编写其他的.vue文件来编写自己的组件;

5 resolve模块解析

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

开发中 会有各种各样的模块依赖,这些模块可能来自于自己编写的代码,也可能来自于第三方库

resolve可以帮助webpack从每个require/import语句中 找到需要引入到合适的模块代码

webpack使用 enhanced-resolve 来解析文件路径

webpack能解析三种文件路径:

绝对路径

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

相对路径

使用import或require的资源文件所处的目录 被认为是上下文目录

在import/require中给定的相对路径 会拼接此上下文路径,来生成模块的绝对路径

模块路径

在resolve.modules中指定的所有目录检索模块;

默认值为['node_modules'] 所以默认会从node_modules中查找文件

我们可以通过设置别名的方式来替换初识模块路径

确实 文件还是文件夹

如果是一个文件:

如果文件具有扩展名,则直接打包文件

否则 使用resolve.extensions选项作为文件扩展名解析

如果是一个文件夹:

会在文件夹中根据resolve.mainFiles配置选项中指定的文件顺序查找;

resolve.mianFiles的默认值是['index']

再根据resolve.extensions来解析扩展名

extensions和alias配置

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

默认值为['.wasm','.mjs','.js','.json.'];

所以 如果我们代码中像添加加载 vue或者jsx 或者ts等文件时 我们必须自己写上扩展名

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

当我们项目的目录结构比较深的时 或者一个文件的路径可能需要../../../这种路径片段

我们可以给某些常见的路径起一个别名

JavaScript resolve:{     extensions:[".wasm",".mjs",".js",".json",".jsx",".jsx",".ts",".vue"],     alias:{         "@":resolveApp("./src"),         pages:resolveApp("./src/pages"),     }, },