本文介绍: 所有的webpack内置插件都作为 webpack 的静态属性存在的，使用下面的方式即可创建一个插件对象
目录
一、内置插件
所有的 webpack 内置插件都作为 webpack 的静态属性存在的，使用下面的方式即可创建一个插件对象：
const webpack = require("webpack")
new webpack.插件名(options)1.DefinePlugin
全局常量定义插件，使用该插件通常定义一些常量值，例如：
webpack.config.js ：
// 引入webpack内置插件
const webpack = require("webpack");
// plugins中配置
plugins: [
new webpack.DefinePlugin({
PI: `Math.PI`, // const PI = Math.PI
VERSION: `"1.0.0"`, // VERSION = "1.0.0"
DOMAIN: JSON.stringify("http://localhost:8080/html"), // DOMAIN = "duyi.com"
}),
],src/index.js ：
console.log(PI);
console.log(VERSION);
console.log(DOMAIN);浏览器：
这样一来，在源码中，我们可以直接使用插件中提供的常量，当 webpack 编译完成后，会自动替换为常量的值。
2.BannerPlugin
它可以为每个 chunk 生成的文件头部添加一行注释，一般用于添加作者、公司、版权等信息。
webpack.config.js ：
new webpack.BannerPlugin({
banner: `
hash:[hash]
chunkhash:[chunkhash]
name:[name]
author:zuozhe
corporation:gongsi
`
})运行 npx webpack 打包命令后的 main.js 文件最上方会出现以下代码：
/*!
*
* hash:07133a8cf05d494f4cba
* chunkhash:aeea2163831469d1baf2
* name:main
* author:zuozhe
* corporation:gongsi
*
*/3.ProvidePlugin
自动加载模块，而不必到处 import 或 require 。
webpack.config.js ：
new webpack.ProvidePlugin({
$: 'jquery',
_: 'lodash'
})src/index.js ：
console.log($("#item")); // <= 起作用
console.log(_.drop([1, 2, 3], 2)); // <= 起作用浏览器：
原文地址:https://blog.csdn.net/m0_60189088/article/details/135992920
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_66071.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
主题授权提示：请在后台主题设置-主题授权-激活主题的正版授权，授权购买：RiTheme官网
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
