WebPack中Plugins的使用和整理，以及常用的Plugins插件
Plugins是webpack的基础，我们都知道webpage的plugin是基于事件机制工作的，这样最大的好处是易于扩展。
内置插件
通过在webpack配置中使用插件属性来将插件包含进你的项目中。
var webpack = require("webpack");
module.exports = {
plugins: [
new webpack.ResolverPlugin([
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
], ["normal", "loader"])
]
};其他插件
其他不是内置的插件可以通过npm安装已经发布了的插件，如果插件没有发布到npm，也可以通过其他方式安装：
npm install component-webpack-plugin然后就能像下面这样来使用：
var ComponentPlugin = require("component-webpack-plugin");
module.exports = {
plugins: [
new ComponentPlugin()
]
}如果是通过npm来安装第三方插件，建议使用https://www.npmjs.com/package/webpack-load-plugins工具。它会在你项目的依赖当中检查所有的第三方插件，只有在你需要用到的时候才会加载它们。
常用webpack的plugin
html-webpack-plugin
const htmlWebpackPlugin=require('html-webpack-plugin');
plugins:[
new htmnlWebpackPlugin({
template:'index.html',
filename:'home.html',
title:'webpack',
data:'aaaaaa'
})
]
//向index.html传入title和data变量值，并且生成home.html；一个plugins数组中科院有多个HtmlWebpackPlugin对象实例open-browser-webpack-plugin
const OpenBrowserWebpackPlugin=require('open-browser-webpack-plugin');
plugins:[
new OpenBrowserWebpackPlugin({url:'https://localhost:8877'})
]
//启动webpack之后，自动打开浏览器extract-text-webpack-plugin
const ExtractTextPlugin=require('extract-text-webpack-plugin'); plugins:[
new ExtractTextPlugin('main.css')
]
//插件打包css代码到main.css中copy-webpack-plugin
const CopyWebpackPlugin=require('copy-webpack-plugin');
new CopyWebpackPlugin([{
from: __dirname + '/src/public'
}]);
//作用：把public 里面的内容全部拷贝到编译目录webpack-md5-hash
const WebpackMd5Hash=require('webpack-md5-hash');
output: {
//...
chunkFilename: "[name].[chunkhash:6].js"
},
plugins:[
new WebpackMd5Plugin();
]
//它的作用是生成具有独立hash值的css和js文件，即css和js文件hash值解耦。webpack-md5-hash插件对chunk-hash钩子进行捕获并重新计算chunkhash，它的计算方法是只计算模块本身的当前内容（包括同步模块）。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！