Wepack Plugins
Table of Contents
How Plugins Work discussion
function ConsoleLogOnBuildWebpackPlugin() {
};
ConsoleLogOnBuildWebpackPlugin.prototype.apply = function(compiler) {
compiler.plugin('run', function(compiler, callback) {
console.log("The webpack build process is starting!!!");
callback();
});
};HtmlWebpackPlugin plugin
Automatically generate a html file for serving your bundle. Within dist/index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>DefinePlugin plugin
- Each
keypassed into DefinePlugin is an identifier or multiple identifiers joined with. - If the value is a
stringit will be used as a code fragment. - If the value isn't a
string, itwill be stringified(including functions). - If the value is an
objectall keys are defined the same way. - If you prefix
typeofto the key, it's only defined for typeof calls. (typeof window)
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object")
})