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，它的计算方法是只计算模块本身的当前内容（包括同步模块）。
浅谈Webpack打包工具的应用
webpack 在前端工程中随处可见，当前流行的 vue, react, weex 等解决方案都推崇 webpack 作为打包工具。前端工具云集的时代，这是你值得选择的之一。
一步一步webpack，webpack的学习入门
webpack是前端工程构建的一套工具，为什么一个程序称之为一套呢，是因为webpack其实是npm的一个模块，使用起来的话，这期间还需要很多其它模块来进行支持，所以我称之为一套工具。
如何写 Webpack 配置文件
本文从一个小Demo开始，通过不断增加功能来说明webpack的基本配置，只针对新手。webpack基本的配置就可以熟悉了，会引入loader，配置loader选项，会设置alias，会用plugins差不多。
大多数项目中会用到的webpack小技巧
webpack技巧的总结：进度汇报、压缩、复数文件打包、分离app文件与第三方库文件、资源映射、输出css文件、开发模式、分析包的大小、更小的react项目、更小的Lodash、引入文件夹中所有文件、清除extract-text-webpack-plugin日志。
优化Webpack构建性能的几点建议
Webpack 作为目前最流行的前端构建工具之一，在 vue/react 等 Framework 的生态圈中都占据重要地位。在开发现代 Web 应用的过程中，Webpack 和我们的开发过程和发布过程都息息相关，如何改善 Webpack 构建打包的性能也关系到我们开发和发布部署的效率。
Webpack 4正式发布了！
新版 Webpack 中我们所做的每一个更新目的都在于此，为了当大家在使用 Webpack 的时候敏捷连续毫无顿挫感。 webpack 4 进行构建性能测试，得出的结果非常有趣。结果很惊人，构建时间降低了 60%-98%！
Webpack 4.0.0不再支持 Node.js 4
Webpack 是一个现代 JavaScript 应用程序的模块打包器 (module bundler) 。当 Webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块
我当初为什么写webpack_Tobias Koppers
Tobias Koppers是一位自由软件开发者，家住德国纽伦堡。他因写出webpack这个已有数百万开发者使用的开源软件而名噪一时。他目前专注于JavaScript和开源项目。以下是我对他个人的专访，希望对大家有所启发。
webpack项目轻松混用css module
本文讲述css-loader开启css模块功能之后，如何与引用的npm包中样式文件不产生冲突。比如antd-mobilenpm包的引入。在不做特殊处理的前提下，样式文件将会被转译成css module。
Vue中使用webpack别名的方法
Vue中使用webpack别名的方法,需要引入公共文件，但是公共文件的文件路径里当前文件很远，那么就会形成上面示例中的那种路径很长的情况。而因为文件目录是约定俗成的，不可轻易更改，无法修改相对路径。那么该怎么办呢？
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!