教程（一）---入口、devtool、输出、解析教程（二）---module.loadersWebpackversion3.10.0Plugins（官方Documentation）上一篇中提到的loader是用来转换某些类型的模块的，它可以用来做更广泛的任务。如：模板编译输出，打包优化，定义类似环境变量等plugins:[newwebpack.DefinePlugin({'process.env':require('../config/dev.env')}),newwebpack.HotModuleReplacementPlugin(),newHtmlWebpackPlugin({filename:'index.html',template:'index.html',inject:true}),]plugins:数组形式包含每个插件实例。每个插件实例都是一个带有apply属性(Function.prototype.apply)的js对象。constwebpack=require('webpack');constconfiguration=require('./webpack.config.js');letcompiler=webpack(configuration);functionHelloWorldPlugin(options){//做点什么...}//这指向编译器。HelloWorldPlugin.prototype.apply=function(compiler){//compiler.plugin()，可以看做是一个绑定事件，打包的时候会触发该事件。compiler.plugin('run',function(){console.log('helloworld!')});};每个插件都有自己的选项（配置）。说说常用的插件吧。webpack.DefinePlugin(官方文档)webpack.xxxxPlugin这种插件是webpack的内置插件。DefinePlugin：它的作用是定义全局常量，也就是常量。也就是说，如果模块中使用了它定义的全局常量，那么你就不能改变它的值。使用示例：//webpack.config.jsPlugins:[newwebpack.DefinePlugin({'_ABC_':false})]//在一个要打包的js模块中if(_ABC_){console.log('_ABC_istrue,你可以看到这个输出');}webpack.HotModuleReplacementPlugin（官方文档）它是热模块替换（HMR）。在应用程序运行时交换、添加或删除模块，无需完全重新加载。它的选项：配置属性数据类型角色multiStepBoolean如果为真，插件将分两步构建。先编译频繁更新的模块，再编译剩余的公共资源。fullBuildTimeoutNumbermultiStep为true以启用两个步骤之间的延迟。requestTimeoutNumber下载东西的超时时间官方来说，这些选项可能被弃用了，只需要newwebpack.HotModuleReplacementPlugin()就可以了。webpack.NoEmitOnErrorsPlugin（官方文档）其作用：跳过编译时出错的代码并记录下来，这样编译后的包就不会出错了。webpack.optimize.DedupePlugin（官方文档）项目中有很多模块，有些模块有相同的依赖，所以它的作用是删除重复的依赖。比如模块A和模块B都依赖lodash.js，那么保留一个lodash.js，删除多余的。webpack.ProvidePlugin（官方文档）会自动加载模块，无需import/require即可使用。Plugins:[$:'jquery']//你可以在不导入jquery的情况下使用$。//可以理解为import$from'jquery'或者const$=require('jquery')HtmlWebpackPluginglobal--第三方插件（官方文档）根据你提供的html模板生成html。因为是第三方插件，需要安装导入使用。//安装npminstall--save-devhtml-webpack-plugin//ImportconstHtmlWebpackPlugin=require('html-webpack-plugin');//使用新的HtmlWebpackPlugin({filename:'index.html',template:'index.html',inject:true...//其他配置见下文})filename:生成的文件名。你可以走一条路。template：html模板路径。注入：“真”|'头'|'身体'|'错误的'。true：将所有资源（js、css等）注入到模板中，js资源注入到html中的body底部。body：将所有js资源注入到html中body的底部。head：将js资源放在html的头部。散列：'真'|'错误的'。如果为true，webpack打包后，所有的js和css都会有hash值。这对于缓存清除非常有用。缩小：{...}|'错误的'。{...}：使用html-minifier的option对象来减小打包文件的大小。一般用于生产环境。让我们看看它通常使用什么。collapseWhitespace:'真'|'错误的'。可以理解为如果为true，减少html中节点间的空白。用于优化html。removeComments：如果为真，则删除html中的注释。removeAttributeQuotes:如果为true，则尽可能去除html中标签元素属性的引号，一些特定的属性不会。（请注意，HTML规范建议始终使用引号。谨慎使用该选项）
