学习Webpack中图片-JS-Vue-plugin

你会发光哎u2024-09-30 18:48

目录

图片文件

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

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

在webpack5之前，加载这些资源需要使用一些loader ，比如raw-loader、url-loader、file-loader

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

资源模块类型

资源模块类型是指用于处理非 JavaScript 文件（例如 CSS、图像、字体等）的一种机制

常见的资源模块类型包括以下几种：

  • asset/resource ：

    • 用途 ：用于将文件（如图像、字体等）导出为单独的文件，并返回该文件的 URL（即路径）

    • 作用 ：类似于 file-loader ，会在构建时将文件移到输出目录，最终导出的 JavaScript 会引用文件的 URL

    • 适用文件类型 ：图像（如 .png, .jpg），字体文件（如 .woff, .ttf），音视频文件等

  • asset/inline ：

    • 用途 ：用于将文件（如小图像）以 Base64 字符串的形式嵌入到最终的 JavaScript 中，而不生成单独的文件

    • 作用 ：类似于 url-loader ，用于将文件转为 Data URL（Base64 编码），适合小文件，以减少 HTTP 请求

    • 适用文件类型：小图像、字体等文件，尤其是文件较小的情况

  • asset/source ：

    • 用途 ：用于导出文件的源代码内容，而不是将它们打包成单独的文件或 Base64 字符串

    • 作用 ：类似于 raw-loader ，返回文件的源代码内容作为 JavaScript 模块导出的字符串。适用于直接想以字符串形式引入文件内容的情况

    • 适用文件类型 ：文本文件（如 .txt, .svg, .md），CSS 或其他代码文件

  • asset ：

    • 用途 ：一种通用的资源模块类型，它可以在 asset/resource 和 asset/inline 之间动态切换

    • 作用 ：类似于 url-loader ，Webpack 会根据文件大小自动选择是将文件作为资源输出还是内联到代码中。如果文件大小超过指定限制（默认是 8KB），它会导出为资源文件；否则会作为内联文件处理

    • 适用文件类型：图片、字体、音频、视频文件等

  • javascript/auto：

    • 用途 ：这是 Webpack5 默认的 JavaScript 模块类型，用于处理 CommonJS、ES Modules 和其他类型的 JavaScript 文件

    • 作用 ：可以处理所有的 JavaScript 文件，并支持混合的模块类型（例如，既有 import 也有 require 的文件）

    • 适用文件类型 ：.js, .cjs, .mjs 文件

  • javascript/esm：

    • 用途 ：明确指定该模块只能使用 ECMAScript 模块（ESM）的模块类型

    • 作用 ：主要用于现代 JavaScript 的 ES 模块化，import 和 export 语法

    • 适用文件类型 ：通常是 .mjs 文件，也可以是 .js 文件，但明确支持 ESM

上面主要介绍了四种处理图片的类型，打包图片时也可以加自定义设置：

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

    • 常用的占位符：

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

      [name]：处理文件的名称

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

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

      js 复制代码 
      const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "build"),
    assetModuleFilename: "img/[name].[hash:6][ext]", // 放img目录下 图片名字.hash的前六位 扩展名
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset",
      },
    ],
  },
};

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

      js 复制代码 
      const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "build"),
    // assetModuleFilename: "img/[name].[hash:6][ext]", // 放img目录下 图片名字.hash的前六位 扩展名
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset",
        generator: {
          filename: "image/[name].[hash:8][ext]",
        },
      },
    ],
  },
};
  • 图片大小设置

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

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

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

    • 将type修改为asset，添加一个parser属性，并且制定dataUrlCondition，添加maxSize属性

      js 复制代码 
      const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset",
        generator: {
          filename: "image/[name].[hash:8][ext]",
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024, // 这时使用的图片没有超过这个值他就不会被打包成文件，而是转base64使用
          },
        },
      },
    ],
  },
};

JS文件

开发中，想要使用ES6+的语法，想要使用TypeScript，开发React项目，这些文件的处理它们都是离不开Babel的

babel

事实上，在开发中我们很少直接去接触babel，但是babel对于前端开发来说，目前是不可缺少的一部分，学习Babel对于我们理解代码从编写到线上的转变过程至关重要

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

命令行使用

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

如果希望在命令行尝试使用babel，需要完成如下操作：

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

    • @babel/core ：babel的核心代码，必须安装

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

  • npx babel src --out-dir dist ：使用babel来处理源代码

    • src：是源文件的目录

    • --out-dir ：指定要输出的文件夹dist

  • 拓展功能需要用到插件：

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

      npm install @babel/plugin-transform-arrow-functions -D

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

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

      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

    • 如果要转换的内容过多，一个个设置是比较麻烦的，可以使用预设（preset）：

      npm install @babel/preset-env -D

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

babel-loader

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

  • 之前已经安装了@babel/core，不需要再次安装

  • npm install babel-loader -D

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

babel-preset

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

  • 常见的预设有三个：env，react，TypeScript

  • 安装preset-env：npm install @babel/preset-env

  • 添加wk.config.js配置

    js 复制代码 
    const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset",
        generator: {
          filename: "image/[name].[hash:8][ext]",
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024, // 这时使用的图片没有超过这个值他就不会被打包成文件，而是转base64使用
          },
        },
      },
      {
        test: /\.m?js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              // presets: [
              //   [
              //     "@babel/preset-env",
              //     {
              //       targets: "> 0.25%, not dead",
              //       useBuiltIns: "usage",
              //       corejs: 3,
              //     },
              //   ],
              // ],
              presets: ["@babel/preset-env"],
            },
          },
        ],
      },
    ],
  },
};

Vue文件

  • 编写vue代码

    js 复制代码 
    // app.vue
<template>
  <div class="box-vue">
    <h2>hello vue</h2>
    <p>哈哈哈哈哈</p>
  </div>
</template>

<script setup></script>

<style>
  .box-vue {
    width: 100px;
    height: 100px;
    background: cyan;
  }
</style>


// index.js
import "./style.css";
import "./style.less";
import "./bgImg.css";
import App from "./app.vue";
import { createApp } from "vue/dist/vue.esm-bundler.js";
const img = require("./images/2.jpg");

const divEl = document.createElement("div");
divEl.innerHTML = `<div class='box-css'>hello css</div><div class='box-less'>hello less</div><div class='bgImg'></div><image class='img' src='${img}' />`;
divEl.className = "box";
document.body.appendChild(divEl);

createApp(App).mount("#app");

  • 打包会报错，我们需要安装vue-loader

vue-loader

  • npm install vue-loader -D ：安装vue-loader

  • 添加配置wk.config.js：{ test: /\.vue$/, loader: "vue-loader" }

  • 这时在打包依然会报错，因为需要添加 @vue/compiler-sfc 来对template进行解析

@vue/compiler-sfc

  • npm install @vue/compiler-sfc -D ：安装@vue/compiler-sfc，如果安装vue时自动安装了就不需要安装了

  • 需要配置对应的Vue插件：

    js 复制代码 
    const path = require("path");
const { VueLoaderPlugin } = require("vue-loader/dist/index");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "build"),
  },
  plugins: [new VueLoaderPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset",
        generator: {
          filename: "image/[name].[hash:8][ext]",
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024, // 这时使用的图片没有超过这个值他就不会被打包成文件，而是转base64使用
          },
        },
      },
      {
        test: /\.m?js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
            },
          },
        ],
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
    ],
  },
};

plugin

上面打包vue我们引入了个新的知识插件，接下来学习plugin相关内容

Webpack的另一个核心是Plugin ，官方有这样一段对Plugin的描述：

  • Loader是用于特定的模块类型进行转换

  • Plugin除了loader功能其他都可以做，可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等

CleanWebpackPlugin

前面练习的过程中，每次修改了一些配置，重新打包时都需要手动删除dist文件夹 ，可以借助于一个插件来帮助完成就是 CleanWebpackPlugin

  • npm install clean-webpack-plugin -D：安装
  • 在wk.config.js中配置

HtmlWebpackPlugin

我们的HTML文件是编写在根目录下的，最终打包的build文件夹中是没有index.html文件 ，但在进行项目部署的时，必然是需要有对应的入口文件index.html，所以也需要对index.html进行打包处理

  • npm install html-webpack-plugin -D ：对HTML进行打包处理使用另外一个插件：HtmlWebpackPlugin

  • 配置wk.config.js

  • 执行打包命令后，发现自动在build文件夹中，生成了一个index.html的文件，该文件中也自动添加了我们打包的index.js文件

  • html默认情况下是根据ejs的一个模板来生成的，在html-webpack-plugin的源码中，有一个default_index.ejs模块

  • 也可以修改打包index.html的内容

    • 自定义HTML模板

      比如添加一个noscript标签，在用户的JavaScript被关闭时，给予相应的提示

      比如在开发vue或者react项目时，我们需要一个可以挂载后续组件的根标<div id="app">

    • 自定义模板数据填充

      上面的html中，会有一些类似这样的语法<% 变量 %>，这个是EJS模块填充数据的方式

      title ：可以在进行htmlWebpackPlugin.options.title读取时，就会读到该信息

      template：指定我们要使用的模块所在的路径

      filename ：生成的HTML文件名

      inject ：插入打包的资源文件，默认值为 true。可以设置为 'head' 或 'body' 来指定资源注入的位置。

      minify ：对生成的 HTML 进行压缩（常用于生产环境） collapseWhitespace: 去除空白，removeComments: 移除注释，removeAttributeQuotes: 移除属性的引号

  • 配置wk.config.js并打包

    js 复制代码 
    // ./public/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,user-scalable=no"
    />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>
        We're sorry but <%= webpackConfig.name %> doesn't work properly without
        JavaScript enabled. Please enable it to continue.
      </strong>
    </noscript>
    <div id="app"></div>
  </body>
</html>


// wk.config.js
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader/dist/index");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "build"),
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "haahha",
      template: "./public/index.html",
      filename: "main.html",
      minify: {
        collapseWhitespace: true, // 移除空白
        removeComments: true, // 移除注释
        removeAttributeQuotes: true, // 移除属性的引号
      },
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset",
        generator: {
          filename: "image/[name].[hash:8][ext]",
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024, // 这时使用的图片没有超过这个值他就不会被打包成文件，而是转base64使用
          },
        },
      },
      {
        test: /\.m?js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
            },
          },
        ],
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
    ],
  },
};

我们配置完打包发现还是报错，因为在模块中还使用到一个BASE_URL的常量，要用到下面的插件

DefinePlugin

在模块中还使用到一个BASE_URL的常量，但是我们并没有设置过这个常量值，所以会出现没有定义的错误，这个时候可以使用DefinePlugin插件

  • DefinePlugin允许在编译时创建配置的全局常量，是一个webpack内置的插件（不需要单独安装）

  • 在wk.config.js配置再打包就可以取到BASE_URL不会报错了

相关推荐
zsy_199116 分钟前
Angular Content security policy
javascript·ecmascript·angular.js
余生H1 小时前
前端大模型入门：实战篇之Vue3+Antdv+transformers+本地模型实现增强搜索
前端·javascript·vue.js·深度学习·transformer·深度搜索·webml
训山1 小时前
【08】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-Scroll容器与Tabs组件
笔记·学习·华为·harmonyos·鸿蒙系统
wei_shuo1 小时前
上下位关系自动检测方法（论文复现）
前端·javascript·easyui
逆旅行天涯2 小时前
基于Vue3内置的lodash函数库实现防抖节流
前端·javascript·vue.js
williamdsy3 小时前
【chrome 插件】初窥
前端·javascript·chrome·插件
30岁以前3 小时前
php语法学习
开发语言·学习·php
DKPT3 小时前
计算机组成原理之进位计数制及其数据之间的相互转换
开发语言·笔记·学习·计算机网络·算法
谢尔登3 小时前
使用 npkill 快速清理本地 node_modules 文件
javascript·node.js
热门推荐
01【经验分享】Ubuntu22.04安装微信(linux官方版)02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04基于vue3 的 Echarts图表展示（任务一：用柱状图展示消费额最高的省份）(操作全流程)（图文版）05软件工程从理论到实践客观题汇总(头歌第一章至第八章)06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07ROS 2 话题：使用C++进行发布与订阅08RAG 实践- Ollama+RagFlow 部署本地知识库09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文106-4 数组中选择两个最小值【武汉理工大学】