Webpack Plugin知识分享

发表于 3年以前 | 总阅读数：417 次

认识Plugin

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

常用Plugin

CleanWebpackPlugin

每次修改了一些配置，重新打包时，都需要手动删除dist文件夹:
我们可以借助于一个插件来帮助我们完成，这个插件就是CleanWebpackPlugin;

安装：

npm install clean-webpack-plugin --save

配置：


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

module.exports = {
  entry: "./src/js/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "build"),
  },
  module: {...},
  plugins: [new CleanWebpackPlugin()],
};

HtmlWebpackPlugin

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

安装

npm install html-webpack-plugin --save

配置

可传入变量例如title，
可自定义模板，template填写模板路径

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

module.exports = {
  entry: "./src/js/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "build"),
  },
  module: {...},
  plugins: [
    new HtmlWebpackPlugin({
      title: "LeBronChao Webpack",
      template: "./public/index.html",
    }),
  ],
};

模板和变量引用方法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <h1>LeBronChao Webpack</h1>
  </body>
</html>

效果

现在自动在build文件夹中，生成了一个index.html的文件
该文件中也自动添加了我们打包的bundle.js文件
这个文件是如何生成的呢?
默认情况下是根据ejs的一个模板来生成的;
在html-webpack-plugin的源码中，有一个default_index.ejs模块;

DefinePlugin

用于定义全局常量

安装

Webpack内置，无需安装

配置

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

module.exports = {
  entry: "./src/js/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "build"),
  },
  module: {...},
  plugins: [
    new DefinePlugin({
      BASE_URL: "'./favicon.ico'",
    }),
  ],
};

注意事项：

定义的变量赋值时若为字符串需嵌套字符串，若为变量在""内填写变量，如上。

模板中的使用方法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="icon" href="<%= BASE_URL %>" />
  </head>
  <body>
    <h1>LeBronChao Webpack</h1>
  </body>
</html>

CopyWebpackPlugin

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

安装：

npm install copy-webpack-plugin --save

配置：

复制的规则在patterns中设置;
from:设置从哪一个源中开始复制;
to:复制到的位置，可以省略，会默认复制到打包的目录下,路径编写以打包目录为根目录;
globOptions:设置一些额外的选项，其中ignore可以编写需要忽略的文件:
DS_Store:mac目录下会自动生成的一个文件;
index.html:也不需要复制，因为我们已经通过HtmlWebpackPlugin完成了index.html的生成;

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

module.exports = {
  entry: "./src/js/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "build"),
  },
  module: {...},
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: "public",
          // 可不写，默认到output
          to: "build",
          globOptions: {
            ignore: ["**/index.html", "**/.DS_Store", "**/abc.txt"],
          },
        },
      ],
    }),
  ],
};

自定义Plugin

webpack有两个非常重要的类Compiler和Compilation
他们通过注入插件的方式，来监听webpack的所有生命周期
插件的注入离不开各种各样的Hook
Hook来源于Tapable库
想自定义Plugin，先了解一个库Tapable
Tapable是官方编写和维护的一个库
Tapable是管理着需要的Hook，这些Hook可以应用到插件中

Tapable Hook分类

同步Sync
SyncHook
SyncBailHook
SyncWaterfallHook
SyncLoopHook
异步Async
以sync开头的为同步hook
以async开头的，两个事件处理回调，不会等待上一次处理回调结束后再执行下一次回调。
AsyncSeriesHook
AsyncSeriesBailHook
AsyncSeriresWaterfallHook
AsyncPrarllelHook
AsyncParallelBailHook
Paralle（并行）
Series（串行）
同步和异步的
其他的类别
baill：当有返回值时，就不会执行后续的事件触发了。
Loop：当返回值为true时，就会反复执行该事件，当返回值为undefined或者不返回内容时，退出事件
Waterfall：当返回值不为undefined时，会将这次返回的结果作为下次事件的第一个参数
Parallel：并行，会同时执行事件处理回调的Hook
Series：串行，会等待上一事件处理回调的Hook

Hook的使用过程

创建Hook对象

New 对象传入的数组为需传入参数key

2 . 注册Hook中的事件

3 . 触发事件

plugin.js

const {SyncWaterfallHook} = require("tapable")

class tapableTest{
    constructor () {
        this.hooks = {
            syncHook:new SyncWaterfallHook(['name','age'])
        }

        this.hooks.syncHook.tap("event1",(name, age) => {
            console.log("event1", name, age);
            return "event1"
        })

        this.hooks.syncHook.tap("event2",(name, age) => {
            console.log("event2", name, age);
        })
    }

    emit(){
        this.hooks.syncHook.call("lebron", 21);
    }


}

const index= new tapableTest()
index.emit()

// event1 lebron 21 
// event2 event1 21

自定义一个AutoUploadPlugin

前端开发完成后，经常要打包上传代码。个人开发者一般会使用Nginx部署服务，每次上传代码太麻烦了，自己写个Plugin让他自动上传到Nginx文件夹吧。

plugin配置
host：主机地址
username：主机用户名
password：主机ssh登录密码
remotePath：远程部署服务的文件夹

const AutoUploadPlugin = require("../plugins/autoUploadPlugin")

plugins:[
    new HtmlWebpackPlgin(),
    new AutoUploadPlugin({
        host:"xx.xx.xx.xx",
        username:"root",
        password:"xxxxxxx",
        remotePath:"/test"
    })
]

AutoUploadPlugin.js
借助node-ssh库完成远程系列操作
npm i node-ssh
Constructor
生成ssh对象
接收options参数-
每个Plugin都需要一个apply函数来注册插件

a . 通过compiler对象调用hooks注册事件

b . 通过compilation对象获取打包输出文件夹路径

c . 建立ssh连接

d . 删除远程服务器中原本的内容

e . 上传生成后的文件到服务器

f . 关闭ssh连接

g . 执行回调

const { NodeSSH } = require("node-ssh")

class AutoUploadPlugin {
    constructor (options) {
        this.ssh = new NodeSSH()
        this.options = options
    }

    apply (compiler) {
        // 使用文件生成后的钩子
        compiler.hooks.afterEmit.tapAsync("AutoUploadPlugin", async (compilation, callback) => {

            // 1. 获取输出的文件夹路径
            const outputPath = compilation.outputOptions.path

            // 2. 连接服务器（ssh）
            await this.connectServer()

            // 3. 删除原来目录中的内容
            const serverDir = this.options.remotePath
            await this.ssh.execCommand(`rm -rf ${serverDir}/*`)

            // 4. 上传文件到服务器
            await this.uploadFiles(outputPath, serverDir)

            // 5. 关闭SSH
            this.ssh.dispose();

            callback()
        })
    }

    async connectServer () {
        await this.ssh.connect({
            host: this.options.host,
            username: this.options.username,
            password: this.options.password
        })
    }

    async uploadFiles (localPath, remotePath) {
        const status = await this.ssh.putDirectory(localPath, remotePath, {
            // 递归上传所有文件
            recursive: true,
            // 并发数
            concurrency: 10
        })
        console.log("Upload " + status ? "成功" : "失败")
    }
}

module.exports = AutoUploadPlugin

本文由哈喽比特于3年以前收录，如有侵权请联系我们。
文章来源：https://mp.weixin.qq.com/s/dCif8FZs14pcq8nhF9fvvw

刘强东夫妇：“移民美国”传言被驳斥

京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而，京东官方通过微博发言人发布的消息澄清了这些传言，称这些言论纯属虚假信息和蓄意捏造。

发布于：1年以前 | 808次阅读 | 详细内容 »

博主曝三大运营商，将集体采购百万台华为Mate60系列

日前，据博主“@超能数码君老周”爆料，国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。

发布于：1年以前 | 770次阅读 | 详细内容 »

ASML CEO警告：出口管制不是可行做法，不要“逼迫中国大陆创新”

据报道，荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦（ASML）CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。

发布于：1年以前 | 756次阅读 | 详细内容 »

抖音中长视频App青桃更名抖音精选，字节再发力对抗B站

今年早些时候，抖音悄然上线了一款名为“青桃”的 App，Slogan 为“看见你的热爱”，根据应用介绍可知，“青桃”是一个属于年轻人的兴趣知识视频平台，由抖音官方出品的中长视频关联版本，整体风格有些类似B站。

发布于：1年以前 | 648次阅读 | 详细内容 »

威马CDO：中国每百户家庭仅17户有车

日前，威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”，同时，他发文表示：中国汽车普及率低于非洲国家尼日利亚，每百户家庭仅17户有车。意大利世界排名第一，每十户中九户有车。

发布于：1年以前 | 589次阅读 | 详细内容 »

研究发现维生素 C 等抗氧化剂会刺激癌症生长和转移

近日，一项新的研究发现，维生素 C 和 E 等抗氧化剂会激活一种机制，刺激癌症肿瘤中新血管的生长，帮助它们生长和扩散。

发布于：1年以前 | 449次阅读 | 详细内容 »

苹果据称正引入3D打印技术，用以生产智能手表的钢质底盘

据媒体援引消息人士报道，苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后，3D系统一度大涨超10%，不过截至周三收盘，该股涨幅回落至2%以内。

发布于：1年以前 | 446次阅读 | 详细内容 »

千万级抖音网红秀才账号被封禁

9月2日，坐拥千万粉丝的网红主播“秀才”账号被封禁，在社交媒体平台上引发热议。平台相关负责人表示，“秀才”账号违反平台相关规定，已封禁。据知情人士透露，秀才近期被举报存在违法行为，这可能是他被封禁的部分原因。据悉，“秀才”年龄39岁，是安徽省亳州市蒙城县人，抖音网红，粉丝数量超1200万。他曾被称为“中老年...

发布于：1年以前 | 445次阅读 | 详细内容 »