原创不易，未经作者允许禁止转载！！
认识Plugin
- Loader是用于特定的模块类型进行转换;
- Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等;
常用Plugin
CleanWebpackPlugin
- 每次修改了一些配置，重新打包时，都需要手动删除dist文件夹:
- 我们可以借助于一个插件来帮助我们完成，这个插件就是CleanWebpackPlugin;
安装：
npm install clean-webpack-plugin --save
配置：
代码语言：javascript复制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",
}),
],
};
模板和变量引用方法
代码语言：javascript复制<!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内置，无需安装
配置
代码语言：javascript复制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'",
}),
],
};
注意事项：
- 定义的变量赋值时若为字符串需嵌套字符串，若为变量在""内填写变量，如上。
模板中的使用方法
代码语言：javascript复制<!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
- 注册Hook中的事件
- 触发事件
- 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函数来注册插件
- 通过compiler对象调用hooks注册事件
- 通过compilation对象获取打包输出文件夹路径
- 建立ssh连接
- 删除远程服务器中原本的内容
- 上传生成后的文件到服务器
- 关闭ssh连接
- 执行回调
- 借助node-ssh库完成远程系列操作
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
