利用插件机制横向扩展webpack
构建能力
webpack
插件机制是为了增强webpack
在项目自动化构建方面的能力(解决除loader
资源模块打包外的其他自动化工作)
常见应用场景:
-
实现自动在打包之前清除
dist
目录,clean-webpack-plugin
每次打包都会覆盖到
dist
目录,只能覆盖同名文件,需要配置output.path
-
自动生成应用所需的
HTML
文件,html-webpack-plugin
在
html
中自动注入webpack
打包生成的bundle
-
根据不同环境为代码注入类似
API
地址这种可能变化的部分 -
拷贝不需要参与打包的资源文件到输出目录,
copy-webpack-plugin
-
压缩
webpack
打包完成后输出的文件 -
自动发布打包结果到服务器实现自动部署
开发一个插件
webpack
的插件机制是软件开发中最常见的钩子机制(类似web
中的事件)
在webpack
整个工作过程有很多环节,便于插件的扩展,webpack
在每个环节都埋下一颗钩子,这样开发插件的时候,通过往这些节点挂在不同的任务,就可以轻松扩展webpack
的能力
需求:清除webpack
打包结果的注释
探索webpack
运行机制和核心工作原理
了解webpack
整个工作过程细节 (查阅代码) 例子
网友评论