Webpack打包图片（asset module type）；Webpack打包JS（babel）；Webpack打包vue代码；resolve模块解析（extensions和alias）

龙猫呗

已于 2023-08-03 09:27:43 修改

阅读量238

点赞数

分类专栏：前端工程化基础文章标签： javascript webpack vue.js

于 2023-08-03 08:54:25 首次发布

本文链接：https://blog.csdn.net/qq_54075517/article/details/132075524

版权

前端工程化基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1_Webpack打包图片

1.1_引入

在项目中使用图片，比较常见的方式是两种：

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

但是以上两种方式，打包会报错

1.2_认识asset module type

当前使用的webpack版本是webpack5：

在webpack5之前，加载这些资源需要使用一些loader，比如raw-loader 、url-loader、file-loader；
在webpack5开始，可以直接使用资源模块类型（asset module type），来替代上面的这些loader；

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

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

model.exports 中打包图片的代码

  module: {
    rules: [
      {     
        test: /\.(png|jpe?g|svg|gif)$/,
        // 方式1.打包两张图片, 并且这两张图片有自己的地址, 将地址设置到img/bgi中
        // 缺点: 多图片加载的两次网络请求
        type: "asset/resource",

        // 方式2.将图片进行base64的编码, 并且直接编码后的源码放到打包的js文件中
        // 缺点: 造成js文件非常大, 下载js文件本身消耗时间非常长, 造成js代码的下载和解析/执行时间过长
        //type: "asset/inline"
      }
    ]
  }

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

方式一：修改output，添加assetModuleFilename属性；

方式二：在Rule中，添加一个generator属性，并且设置filename；

这里介绍几个最常用的placeholder：

[ext]：处理文件的扩展名；
[name]：处理文件的名称；
[hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）；

1.4_url-loader的limit效果

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

这是因为小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程；
而大的图片也进行转换，反而会影响页面的请求速度；

需要两个步骤来实现：

步骤一：将type修改为asset；
步骤二：添加一个parser属性，并且制定dataUrl的条件，添加maxSize属性；

  module: {
    rules: [
      {     
        test: /\.(png|jpe?g|svg|gif)$/,
        // 3.合理的规范:
        // 3.1.对于小一点的图片, 可以进行base64编码
        // 3.2.对于大一点的图片, 单独的图片打包, 形成url地址, 单独的请求这个url图片
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 60 * 1024
          }
        },
        generator: {
          // 占位符
          // name: 指向原来的图片名称
          // ext: 扩展名
          // hash: webpack生成的hash
          filename: "img/[name]_[hash:8][ext]"
        }
          
      }    
   ]
  }

2_Webpack打包JS

2.1_为什么需要babel？

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

开发中，想要使用ES6+的语法，想要使用TypeScript，开发React项目，它们都是离不开Babel的；
所以，学习Babel对于理解代码从编写到线上的转变过程至关重要；

那么，Babel到底是什么呢？

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

如下图，上面的代码是ES6+的代码，下面的代码是转化后的javaScript代码
在这里插入图片描述

2.2_Babel命令行使用

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

如果希望在命令行尝试使用babel，需要安装如下库：

@babel/core：babel的核心代码，必须安装；
@babel/cli：可以让在命令行使用babel；

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

使用babel来处理的源代码：

src：是源文件的目录；
–out-dir：指定要输出的文件夹dist，dist

npx babel src --out-dir dist

2.3_插件的使用

比如需要转换箭头函数，那么就可以使用箭头函数转换相关的插件：

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

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

这是因为 plugin-transform-arrow-functions，并没有提供这样的功能；
需要使用 plugin-transform-block-scoping 来完成这样的功能；

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

2.4_Babel的预设preset

但是如果要转换的内容过多，一个个设置是比较麻烦的，可以使用预设（preset），暂时不需要理解预设代表的含义；

安装@babel/preset-env预设：

npm install @babel/preset-env -D

执行如下命令：

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

2.5_babel-loader

在实际开发中，通常会在构建工具中通过配置babel来对其进行使用的，比如在webpack中。

那么就需要去安装相关的依赖。如果之前已经安装了@babel/core，那么不需要再次安装；

npm install babel-loader -D

可以设置一个规则，在加载js文件时，使用的babel：

moudule:{
  rules:[
  	{
        test: /\.js$/,
        use: [
          { 
            loader: "babel-loader", 
            //省略的插件代码
            // options: {
            //   plugins: [
            //     "@babel/plugin-transform-arrow-functions",
            //     "@babel/plugin-transform-block-scoping"
            //   ]
            // } 
          }
        ]
      }
    ]
}

2.6_babel-preset

如果一个个去安装使用插件，那么需要手动来管理大量的babel插件，可以直接给webpack提供一个preset，webpack会根据的预设来加载对应的插件列表，并且将其传递给babel。

比如常见的预设有三个：

env
react
TypeScript

安装preset-env：

npm install @babel/preset-env

babel.config.js代码

module.exports = {
 //插件代码可以在此处填写
  // plugins: [
  //   "@babel/plugin-transform-arrow-functions",
  //   "@babel/plugin-transform-block-scoping"
  // ]
  //下面是预设代码
  presets: [
    "@babel/preset-env"
  ]
}

3_webpack打包vue代码

3.1_编写一个vue代码

由于未安装Vue相关的环境，先安装一个VSCode中的vue插件Vue Language Features 。

编写Vue相关的代码，webpack可以对Vue代码进行解析

Hello.vue代码

<template>
  <div>
    <!-- html -->
    <h2 class="title_vue">{{title}}</h2>
    <p class="content_vue">
      我是内容, 哈哈哈哈哈哈哈哈
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: "我是Vue的标题"
      }
    }
  }
</script>

<style>
  .title_vue {
    color: green;
    font-size: 100px;
  }

  .content_vue {
    color: yellow;
    font-size: 30px;
  }
</style>

main.js代码

import { createApp } from 'vue' 
import Hello from './vue_demo/Hello'

// Vue代码，插入到index.html中id为app的区域
createApp(Hello).mount("#app")

index.html

<!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>
  
  <div id="app"></div>

  <script src="./build/bundle.js"></script>
    
</body>
</html>

3.2_打包vue代码

如果打包出现错误 “You may need an appropriate loader to handle this file type”，说明需要合适的Loader来处理文件。

所以输入终端命令行：

npm install vue-loader -D

然后在webpack.config.js文件中的moudle.exports中的配置vue-loader

 const { VueLoaderPlugin } = require("vue-loader/dist/index")

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]

3.3_@vue/compiler-sfc

按照3.2配置后，打包依然会报错，这是因为必须添加@vue/compiler-sfc来对template进行解析：

npm install @vue/compiler-sfc -D

另外需要配置对应的Vue插件：

 const { VueLoaderPlugin } = require("vue-loader/dist/index")
 
 module.exports = {
    plugins: [
    new VueLoaderPlugin()
  ]
}

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

4_resolve模块解析

4.1_解析

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

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

webpack能解析三种文件路径：

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

（2）相对路径

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

（3）模块路径

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

4.2_确定文件还是文件夹

如果是一个文件：

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

如果是一个文件夹：会在文件夹中根据 resolve.mainFiles配置选项中指定的文件顺序查找；

resolve.mainFiles的默认值是 [‘index’]；
再根据 resolve.extensions来解析扩展名；

4.3_extensions和alias配置

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

默认值是 [‘.wasm’, ‘.mjs’, ‘.js’, ‘.json’]；
如果代码中想要加载默认值以外的拓展名，比如 .vue 或者 jsx 或者 ts 等文件时，必须自己写上扩展名；
若不想自己手动添加拓展名，则在extentions数组中添加

配置别名alias：

特别是当项目的目录结构比较深的时候，或者一个文件的路径可能需要 …/…/…/这种路径片段；
可以给某些常见的路径起一个别名；

module.exports = {
  resolve: {
    extensions: [".js", ".json", ".vue", ".jsx", ".ts", ".tsx"],  //添加拓展名
    alias: {  //起别名
      utils: path.resolve(__dirname, "./src/utils")
    }
  }
}