Webpack：打包图片、CleanWebpackPlugin、HtmlWebpackPlugin、DefinePlugin、CopyWebpackPlugin

cocoCola91667
142 阅读12分钟

本文整理来自深入Vue3+TypeScript技术栈-coderwhy大神新课，只作为个人笔记记录使用，请大家多支持王红元老师。

加载图片案例准备

为了演示我们项目中可以加载图片，我们需要在项目中使用图片，比较常见的使用图片的方式是两种：

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

注意：不能通过imgEl.src = '../img/zznh.png';这种方式来设置图片，因为这样就相当于写死了，图片打包之后位置就变了。我们可以把图片当成一个模块导入，然后再设置src，如下：

import zzhnImage from '../img/zznh.png';
// 设置img元素的src
const imgEl = document.createElement('img');
imgEl.src = zzhnImage;
document.body.appendChild(imgEl);

这个时候，打包会报错。

file-loader

要处理jpg、png等格式的图片，我们也需要有对应的loader：file-loader，它的作用就是帮助我们处理import/require()方式引入的文件资源，并且会将它放到我们输出的文件夹中，安装file-loader：

npm install file-loader -D

配置处理图片的Rule：

显示结果：

上面我们打包之后，文件都在一个build文件夹中，并且文件名很乱，下面我们解决这个问题：

设置文件的名称和路径

有时候我们想处理后的文件名称按照一定的规则进行显示，比如保留原来的文件名、扩展名，同时为了防止重复，包含一个hash值等。

这个时候我们可以使用PlaceHolders来完成，webpack给我们提供了大量的PlaceHolders来显示不同的内容：webpack.js.org/loaders/fil… ，我们可以在文档中查阅自己需要的placeholder。

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

[name]：处理文件的名称；
[hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）；
[contentHash]：在file-loader中和[hash]结果是一致的（在webpack的一些其他地方不一样，后面会讲到）；
[hash:<length>]：截图hash的长度，默认32个字符太长了；
[path]：文件相对于webpack配置文件的路径；

我们可以通过outputPath来设置输出的文件夹：

当然，我们也可以通过 img/ 设置文件夹，这个也是vue、react脚手架中常见的设置方式，其实按照这种设置方式就可以了。

url-loader

url-loader和file-loader的工作方式是相似的，但是可以将较小的文件，转成base64的URI。

补充：如果小图片比较多，一个一个请求就会给服务器造成很大的压力，我们前面学了可以使用精灵图、字体图标。除此之外还可以将小的图片编码成base64的URI，图片编码成base64的URI后就会被嵌入到其他资源里面（比如：css、js）这时候图片就会跟随其他资源一块被下载下来，然后我们的浏览器再对base64的URI进行解析，就可以显示图片了。

安装url-loader：

npm install url-loader -D

显示结果是一样的，并且图片可以正常显示。

但是在dist文件夹中，我们会看不到图片文件，这是因为默认情况下url-loader会将所有的图片文件转成base64编码。 我们希望的小图才base64编码，大图不管，怎么设置呢？

url-loader的limit

但是开发中我们往往是小的图片需要转换，但是大的图片直接使用图片即可。这是因为小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程，而大的图片也进行转换，反而会影响页面的请求速度。

那么，我们如何可以限制哪些大小的图片转换和不转换呢？ url-loader有一个options属性limit，可以用于设置转换的限制，下面的代码小于100k的图片才会进行base64编码，所以38kb的图片会进行base64编码，而295kb的不会。

url的工作情况分两种情况：

  1. 文件大小小于limit参数，url-loader将会把文件转为base64的URI；
  2. 文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。因此我们只需要安装url-loader即可。

补充：loader和plugin的区别

  • Loader是加载器的意思，是对单独的模块进行处理，比如css-loader
  • Plugin是插件的意思，作用于整个构建过程，比如使用DefinePlugin进行环境变量注入

认识asset module type

在webpack5之前，加载这些资源我们需要使用一些loader，比如file-loader、url-loader、raw-loader(可以将文件以字符串的形式返回)。我们当前使用的webpack版本是webpack5，在webpack5开始，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader。

资源模块类型(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，并且配置资源体积限制实现。

asset module type的使用

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

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

方式一：在Rule中，添加一个generator属性，并且设置filename（推荐），img/就代表图片都放到img文件夹下。

方式二：修改output，添加assetModuleFilename属性（了解）。

url-loader的limit效果

我们需要两个步骤来实现： 步骤一：将type修改为asset。 步骤二：添加一个parser属性，并且制定dataUrl的条件，添加maxSize属性。

加载字体文件

如果我们需要使用某些特殊的字体或者字体图标，那么我们会引入很多字体相关的文件，这些文件的处理也是一样的。

首先，我从阿里图标库中下载了几个字体图标：

在component中引入，并且添加一个i元素用于显示字体图标：

字体的打包

这个时候打包会报错，因为iconfont.css里面依赖了一些其他eot、ttf、woff等文件，我们无法正确处理这些文件，所以报错。我们可以选择使用file-loader来处理，也可以选择直接使用webpack5的资源模块类型来处理。

// {
//   test: /\.(eot|ttf|woff2?)$/,
//   use: {
//     loader: "file-loader",
//     options: {
//       // outputPath: "font",
//       name: "font/[name]_[hash:6].[ext]"
//     }
//   }
// },
{
  test: /\.(eot|ttf|woff2?)$/,
  type: "asset/resource",
  generator: {
    filename: "font/[name]_[hash:6][ext]"
  }
}

最后webpack.config.js的代码如下：

const path = require('path');

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "bundle.js",
    // assetModuleFilename: "img/[name]_[hash:6][ext]"
  },
  module: {
    rules: [
      {
        test: /\.css$/, 
        use: [
          "style-loader",
          "css-loader",
          "postcss-loader"
        ]
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          "less-loader"
        ]
      },
      // {
      //   test: /\.(jpe?g|png|gif|svg)$/,
      //   use: {
      //     loader: "url-loader",
      //     options: {
      //       // outputPath: "img",
      //       name: "img/[name]_[hash:6].[ext]",
      //       limit: 100 * 1024
      //     }
      //   }
      // },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        type: "asset",
        generator: {
          filename: "img/[name]_[hash:6][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024
          }
        }
      },
      // {
      //   test: /\.(eot|ttf|woff2?)$/,
      //   use: {
      //     loader: "file-loader",
      //     options: {
      //       // outputPath: "font",
      //       name: "font/[name]_[hash:6].[ext]"
      //     }
      //   }
      // },
      {
        test: /\.(eot|ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "font/[name]_[hash:6][ext]"
        }
      }
    ]
  }
}

认识Plugin

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

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

上面表达的含义翻译过来就是：

Loader是用于特定的模块类型进行转换； Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等；

CleanWebpackPlugin

前面我们演示的过程中，每次修改了一些配置，重新打包时，都需要手动删除dist文件夹，如果不删除，由于每次打包的时候有可能文件名称和文件内容不一样，打包后的文件就叠加到输出目录下了。 所以cleanWebPackPlugin作用就是在每次打包之前，先把输出目录删掉，创建最新的目录，避免一些不必要的文件还留在同一个目录下。

首先，我们先安装这个插件：

npm install clean-webpack-plugin -D

之后在插件中配置：

HtmlWebpackPlugin

另外还有一个不太规范的地方：我们的HTML文件是编写在根目录下的，而最终打包的dist文件夹中是没有index.html文件的。在进行项目部署的时，必然也是需要有对应的入口文件index.html，所以我们也需要对index.html进行打包处理，对HTML进行打包处理我们可以使用另外一个插件：HtmlWebpackPlugin。

npm install html-webpack-plugin -D

生成index.html分析

我们会发现，现在自动在dist文件夹中，生成了一个index.html的文件，该文件中也自动添加了我们打包的bundle.js文件；

这个文件是如何生成的呢？ 在html-webpack-plugin的源码中，有一个default_index.ejs模块，默认情况下是根据ejs的一个模板来生成的。

自定义HTML模板

如果我们想在自己的模块中加入一些比较特别的内容： 比如添加一个noscript标签，在用户的JavaScript被关闭时，给予响应的提示。 比如在开发vue或者react项目时，我们需要一个可以挂载后续组件的根标签 <div id="app">。

noscript 标签用于当浏览器不支持 JS 的时候在页面上显示一些提示内容，但是也有一些缺点，比如如果是防火墙而不是浏览器禁用了 JS，非但 JS 执行不了，noscript 的内容也不会显示。
比较好的办法是使用 noscript 作为默认方法，同时提供一个 fallback 方法，即页面上提供一个 display: block; 的 div 提示，随后使用 JS 将其设置为 display: none;

假设我们想要的index.html模块如下：

<!DOCTYPE html>
<html lang="">
  <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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

自定义模板数据填充

上面的代码中，会有一些类似这样的语法<% 变量 %>，这个是EJS模块填充数据的方式。在配置HtmlWebpackPlugin时，我们可以添加如下配置：

  • template：指定我们要使用的模块所在的路径；
  • title：在进行htmlWebpackPlugin.options.title读取时，就会读到该信息；

DefinePlugin

但是，这个时候编译还是会报错，因为在我们的模块中还使用到一个BASE_URL的常量：

这是因为在编译template模块时，有一个BASE_URL：<link rel="icon" href="<%= BASE_URL %>favicon.ico">，但是我们并没有设置过这个常量值，所以会出现没有定义的错误，这个时候我们可以使用DefinePlugin插件。

DefinePlugin的使用

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

这个时候，编译template就可以正确的编译了，会读取到BASE_URL的值。

CopyWebpackPlugin

在vue的打包过程中，如果我们将一些文件放到public的目录下（比如favicon.ico图标），那么这个目录会被复制到dist文件夹中。这个复制的功能，我们可以使用CopyWebpackPlugin插件来完成。

安装CopyWebpackPlugin插件：

npm install copy-webpack-plugin -D

接下来配置CopyWebpackPlugin即可，复制的规则在patterns中设置：

  • from：设置从哪一个源中开始复制；
  • to：复制到的位置，可以省略，会默认复制到打包的目录下（也就是dist）；
  • globOptions：设置一些额外的选项，其中可以编写需要忽略的文件： .DS_Store：mac目录下回自动生成的一个文件； index.html：也不需要复制，因为我们已经通过HtmlWebpackPlugin完成了index.html的生成；

mode和devtool配置

上面，如果我们某一行js代码写错了，进行webpack打包后，运行会报错，但是这时候js代码都被打包压缩到bundle.js一行了，我们根本不知道是具体哪一行代码出错，这时候我们就需要Mode配置。

Mode配置选项，可以告知webpack使用相应模式的内置优化，默认值是production（什么都不设置的情况下），可选值有：'none' | 'development' | 'production'。这几个选项有什么样的区别呢?

// 设置模式
// development 开发阶段, 打包后bundle.js不压缩
// production 准备打包上线的时候, 打包后bundle.js会压缩
mode: "development",
// 设置source-map, 建立js映射文件，方便调试代码和错误
devtool: "source-map",

上面我们设置mode: "development"，虽然js代码不会打包到一行了，但是还是不知道代码的具体错误在哪。我们还需要设置devtool: "source-map"，就是建立js映射文件，方便调试代码的时候知道错误在源码的哪一行。设置之后就可以知道js报错在哪一行了，如下：

补充：我们设置mode: "development"只是一行代码，其实就相当于设置了很多东西，如下，一行mode: "development"，就代表了下面注释的好多东西。

最后项目的目录如下：

webpack.config.js文件代码如下：

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // 设置模式
  // development 开发阶段, 会设置development
  // production 准备打包上线的时候, 设置production
  mode: "development",
  // 设置source-map, 建立js映射文件, 方便调试代码和错误
  devtool: "source-map",
  
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "js/bundle.js",
    // assetModuleFilename: "img/[name]_[hash:6][ext]"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      // {
      //   test: /\.(jpe?g|png|gif|svg)$/,
      //   use: {
      //     loader: "url-loader",
      //     options: {
      //       // outputPath: "img",
      //       name: "img/[name]_[hash:6].[ext]",
      //       limit: 100 * 1024
      //     }
      //   }
      // },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        type: "asset",
        generator: {
          filename: "img/[name]_[hash:6][ext]",
        },
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024,
          },
        },
      },
      // {
      //   test: /\.(eot|ttf|woff2?)$/,
      //   use: {
      //     loader: "file-loader",
      //     options: {
      //       // outputPath: "font",
      //       name: "font/[name]_[hash:6].[ext]"
      //     }
      //   }
      // },
      {
        test: /\.(eot|ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "font/[name]_[hash:6][ext]",
        },
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      title: "哈哈哈哈"
    }),
    new DefinePlugin({
      BASE_URL: "'./'"
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: "public",
          to: "./",
          globOptions: {
            ignore: [
              "**/index.html"
            ]
          }
        }
      ]
    })
  ],
};
avatar
文章
阅读
粉丝