看，这些 plugins 常用又简单

2022-04-16 本文已影响0人一颗冰淇淋

前面文章中体验了webpack的打包、解析css资源、处理图片字体等文件接下来看看 plugins 有什么作用吧~

项目路径如下，和上一篇处理图片字体等文件项目保持一致

demo
├─ src
│   ├─ css
│   │   ├─ index.css
│   │   └─ file.css    
│   ├─ img
│   │  ├─ portrait.png 
│   │  └─ sky.jpg        
│   ├─ js
│   │  ├─ component.js
│   │  └─ createElement.js  
│   └─ index.js
├─  index.html
├─  package.json
└─  webpack.config.js

clean-webpack-plugin

我们通过 npm run build 来生成打包后文件夹 dist ，但每次打包后是删除 dist 重新创建文件夹，还是仅覆盖同名文件呢？

答案是：仅覆盖同名文件
我们在 dist 文件夹中新建一个 hello.txt 文件，再通过 npm run build 重新编译，发现 hello.txt 文件仍然存在，也就是说 dist 文件夹没有被删除和重新创建

1_新建hello-txt测试.png

如果在 webpack.config.js 文件中修改配置，打包后文件名发生变化，打包文件夹不被删除，只会覆盖同名文件，会导致文件夹越来越大，除了每次手动删除，还可以使用 clean-webpack-plugin。

通过 npm i clean-webpack-plugin -D 安装依赖，在 webpack.config.js 中配置 plugin

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  // 其它配置省略
  plugins: [new CleanWebpackPlugin()],
};

再次通过 npm run build 编译，发现我们创建的 hello.txt 文件就已经被删除，已经可以通过 plugin 自动删除 dist 文件夹啦~

html-webpack-plugin

目前用于查看打包结果的方式是，通过项目根目录下的 index.html 文件，引入编译后的 js 文件，但这种方式存在两个问题。

当 js 文件非常多时，需要一个个引入，可能有遗漏
在发布线上的时候，编译后的 dist 文件夹作为静态资源，里面需要有 index.html 作为入口文件，而手动将根目录下的 index.html 移动过去，可能需要修改大量的文件路径

html-webpack-plugin 提供了自动生成 html 文件并引入资源的功能，可以解决以上问题

通过 npm install html-webpack-plugin -D 安装依赖，并在 webpack.config.js 中配置

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 其它配置省略
  plugins: [
    new HtmlWebpackPlugin({
      // 自定义 index.html 的 title
      title: "hello webpack",
    }),
  ],
};

编译后入口文件 bundle.js 会被自动引入到 index.html 中

2_html-webpack-plugin.png

html-webpack-plugin 中 ejs 文件就是用于生成 html 的模板

3_ejs.png

但比如 vue、react 的入口 index.html 文件中需要添加 id 为 app 或者 root 的 div 标签，使用默认的 html 模板就不合适了，html-webpack-plugin 提供了自定义模板文件的选项。

将 vue 中位于 public 文件夹下 index.html 的模板文件复制过来

4_vue中模板文件.png

在 webpack.config.js 中配置自定义模板文件

module.exports = {
  // 其它配置省略
  plugins: [
    new HtmlWebpackPlugin({
      // 自定义 index.html 的 title
      title: "hello webpack",
      template: "./public/index.html",
    }),
  ],
};

再通过 npm run build 编译，但此时报错，BASE_URL is not defined

5_BASE_URL.png

这里BASE_URL需要配置全局变量，要使用下面这个 plugin

DefinePlugin

DefinePlugin 存在于 webpck 的包中，不需要单独安装

const { DefinePlugin } = require("webpack");

module.exports = {
  // 其它配置省略
  plugins: [
    new HtmlWebpackPlugin({
      // 自定义 index.html 的 title
      title: "hello webpack",
      template: "./public/index.html",
    }),
    new DefinePlugin({
      // 双引号里的内容会被拿出来作为一个变量，所以 ./ 外面还要加一层引号
      BASE_URL: "'./'",
    }),
  ],
};

再次运行 npm run build，index.html 就可以通过模板生成啦

6_definePlugin.png

copy-webpack-plugin

在上面的 html 页面中引入了一个 favicon.ico，用于展示在网页左上角的图标，这个icon 在 vue/react 项目中是放置在 public 目录下，我们也在 public 目录下放置一个 icon，用于展示。

因为 public 文件下的资源是固定的，直接拷贝到编译后的文件夹引入使用就可以，这里使用 copy-webpack-plugin 来操作。

通过 npm i copy-webpack-plugin -D 安装后，在 webpack.config.js 中配置。

const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  // 其它配置省略
  plugins: [
    new HtmlWebpackPlugin({
      // 自定义 index.html 的 title
      title: "hello webpack",
      template: "./public/index.html",
    }),
    new DefinePlugin({
      // 双引号里的内容会被拿出来作为一个变量，所以 ./ 外面还要加一层引号
      BASE_URL: "'./'",
    }),
    new CopyWebpackPlugin({
      // 用于匹配复制文件的规则
      patterns: [
        {
          from: "public",
        },
      ],
    }),
  ],
};

只配置复制文件来源是不够的，因为HtmlWebpackPlugin已经处理了一次html，会报错index.html文件冲突

7_htmlconflict.png

在上面的 patterns 中需要加上忽略文件的配置

patterns: [
  {
    from: "public",
    globOptions: {
      // 忽略的文件如果在from属性配置的文件夹下，需要在文件名前加上 **/
      ignore: ["**/index.html"],
    },
  },
];

再次运行 npm run build，图标就已经被复制到 dist 文件夹下，网页左上角也能成功显示

8_copy-webpack-plugin.png

以上通过 clean-webpack-plugin 自动删除编译后文件夹、html-webpack-plugin 配置 html 模板、definePlugin 定义全局变量、copy-webpack-plugin 复制 public 下静态资源，使项目资源处理更为简单。

更多有关webpack的内容可以参考我其它的博文，持续更新中~

看，这些 plugins 常用又简单

clean-webpack-plugin

html-webpack-plugin

DefinePlugin

copy-webpack-plugin

猜你喜欢

热点阅读