Webpack5 - 常用Plugin（插件）

一. Webpack的插件是什么

webpack的插件，可以增强webpack的自动化能力，使用插件，可以完成自动清空目录、拷贝资源文件、压缩输出代码等功能。

webpack的一个个插件，就是在 webpack生命周期的钩子上挂载的一个个任务。

一个插件（Plugin）必须是一个函数或者一个包含 apply 方法的对象。

二. 常用的Webpack插件

常用的Webpack插件	作用
clean-webpack-plugin	在每次打包开始清除打包目录中的文件
html-webpack-plugin	自动生成使用 bundle.js 的HTML文件，可根据模板生成，可输出一个或多个html文件
copy-webpack-plugin	拷贝不需打包的资源文件如 public 文件夹中的资源
webpack.DefinePlugin	为项目注入全局变量

更多webpack 插件参见webpack 文档： Plugins | webpack 中文网

上面常用 webpack 插件的使用方法，见 webpack.config.js ：

module.exports = {// ... 此处省略webpack.config.js文件其它部分plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({title: 'Webpack 自定义一个 Plugin',meta: {viewport: 'width=device-width'},template: './src/index.html' // html文件模板}),new HtmlWebpackPlugin({filename: 'about.html',      // 生成html文件的名称}),new CopyPlugin({patterns: [{ from: 'public', to: 'public' }, // 把项目根目录下的public文件夹拷贝到打包输出目录]}),new webpack.DefinePlugin({// 打包后 项目中任何使用的 API_BASE_URL 都会被替换为 'https://api.example.com'API_BASE_URL: JSON.stringify('https://api.example.com')}),]
}

本文完。

Webpack5 - 常用Plugin（插件）相关推荐

如何在Pycham中安装插件，以及Pycham中常用的插件
欢迎大家关注笔者,你的关注是我持续更博的最大动力原创文章,转载告知,盗版必究文章目录:如何在Pycham中安装插件,以及Pycham中常用的插件 1.在Pycham中安装插件 1.1 直接安装 1 ...
常用maven插件总结
maven是目前java项目中比较流行的构建工具,特别是它提供的插件,如果使用得当,整个项目研发流程都将会受益,从而提高研发.测试和部署的效率.这里记录几个常用插件的用法,既方便自己日后回顾,也便于有 ...
maven 常用的插件
我们都知道Maven本质上是一个插件框架,它的核心并不执行任何具体的构建任务,所有这些任务都交给插件来完成,例如编译源代码是由maven- compiler-plugin完成的.进一步说,每个任务对应 ...
Android studio 常用的插件
Android studio 常用的插件 Exynap Effortless Android Development [官网地址]( http://exynap.com/) ![Effortless ...
MacW小编分享设计师们常用Sketch插件合集，让你效率翻倍！
常用Sketch插件都有哪些?Sketch插件总是层出不穷,可以让大家在作出炫酷设计稿的同时,更让大家的工作效率翻倍.macw小编为大家总结了一大波Sketch插件合集,喜欢的赶快收藏起来吧!1.Sk ...
IDEA开发常用便捷插件
最近使用IDEA 为了方便快捷(懒)就自己整理了一下常用的插件可以加快开发效率和提高代码质量 FindBugs-IEDA (自动查找代码问题) · Malicious code vulnera ...
Eclipse的使用（三）Eclipse中常用的插件汇总
工欲善其事,必先利其器 .对于Java开发来说,Eclipse是我们最常用的IDE.而Eclipse相对其他IDE(如NetBeans)来说,最强大的就在于插件,因此,如果不好好的选择插件,那Ecli ...
Eclipse常用开发插件
转载于:http://blog.csdn.net/jackiehff/article/details/8181945 以下是我整理的自己开发过程中的常用Eclipse插件,按字母排序: (1) ...
IDEA一些常用的插件
众所周知,IntelliJ IDEA 是一款优秀的开发工具,几乎是码农必备的工具之一了.下面我来安利几个我比较常用的插件. 1. Translation 一款神奇的翻译插件,支持谷歌.有道.百度.阿里 ...

Webpack5 - 常用Plugin（插件）

一. Webpack的插件是什么

二. 常用的Webpack插件

Webpack5 - 常用Plugin（插件）相关推荐

最新文章

热门文章