DaMeng

webpack 中 DefinePlugin 和 ProvidePlugin 区别

发表于 更新于 分类于 ，

DefinePlugin

DefinePlugin 是 webpack 内置插件，使用此插件可以设置全局变量。常用于区分开发模块和生产模式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const path = require("path");
const webpack = require("webpack");

module.exports = {
	entry: "./src/index.js",
	output: {
		path: path.resolve(__dirname, "dist"),
	},
	plugins: [
		new webpack.DefinePlugin({
			// DefinePlugin 内部通过直接替换的方式替换变量，所以需要用 JSON.stringify 来包裹，否则会被替换成 dev 而不是 "dev"
			PRODUCTIION: JSON.stringify("dev"),
		}),
	],
};

1
2
3
4
5
6
7
//模块文件中直接使用变量 PRODUCTIION
if (PRODUCTIION === "dev") {
	console.log("dev");
} else {
	console.log("pro");
}

ProvidePlugin

ProvidePlugin 是 webpack 的内置插件，使用此插件可以设置全局模块。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const path = require("path");
const webpack = require("webpack");

module.exports = {
	entry: "./src/index.js",
	output: {
		path: path.resolve(__dirname, "dist"),
	},
	plugins: [
		//当至少有模块使用 $zz 时，webpack 才会将 jquery 设置为全局模块并参与打包
		new webpack.ProvidePlugin({
			$zz: "jquery",
		}),
	],
	mode: "development",
};


index.js

1
2
$zz("body").text("hello");