webpack插件配置（1）

1、webpack.DefinePlugin

定义：webpack配置的全局标识变量，配置之后可以在项目中直接使用该变量
需要注意的是，配置的变量的值必须使用单引号包双引号，或者双引号包单引号，不然会导致报错

// webpack.config.js
{
entry:'',
...  //其他配置
plugins: [
    new webpack.DefinePlugin({
      'processEnv': '"development"'
    }),
  ]
}

上面webpack配置文件中配置了plugins，传入了一个对象参数，对象中processEnv的值为‘“ development”’，即以后再项目中可以直接只用改变量进行逻辑处理。实例如下：

// main.js
if(processEnv==='development'){
  // 开发环境你需要做的事情
  console.log(‘这个是我通过webpack配置的全局标识’)
}

2、html-webpack-plugin

描述：提供HTML自动创建的插件，会将编译好的js文件内嵌进HTML中。

使用方法：

• 安装 yarn add html-webpack-plugin
• webpack配置文件中引用并实例化放入plugins中

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
{
entry:'',
...  //其他配置
plugins: [
    new HtmlWebpackPlugin({})
  ]
}

Options

HtmlWebpackPlugin的构造器可传入对象参数Options，进行多种配置，我上面的代码传入为空，即自动生成它自己的HTML模板文件，其他配置采用默认方式。你也可以使用自己的模板来生成HTML文件:

plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html',
      inject: true
    })
  ]

，具体配置自动如下：

Name	Type	Default	Description
title	{String}	Webpack App	配置生成的index.html文档中的title属性
filename	{String}	'index.html'	自己设置生成的HTML文件名称
template	{String}	``	配置模板文件，webpack以此模板生成html文件，需要传入模板文件的路径
templateParameters	{Boolean|Object|Function}	``	Allows to overwrite the parameters used in the template
inject	{Boolean|String}	true	true || 'head' || 'body' || false配置静态资源注入位置， 当配置为 true 或者 'body'时 所有的JavaScript脚步文件将被放置在body元素最底部，当设置为head的时候，脚步将被注入在head标签中
favicon	{String}	``	Adds the given favicon path to the output HTML
meta	{Object}	{}	Allows to inject meta-tags. E.g. meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}
minify	{Boolean|Object}	false	Pass html-minifier's options as object to minify the output
hash	{Boolean}	false	If true then append a unique webpack compilation hash to all included scripts and CSS files. This is useful for cache busting
cache	{Boolean}	true	Emit the file only if it was changed
showErrors	{Boolean}	true	Errors details will be written into the HTML page
chunks	{?}	?	Allows you to add only some chunks (e.g only the unit-test chunk)
chunksSortMode	{String|Function}	auto	Allows to control how chunks should be sorted before they are included to the HTML. Allowed values are 'none' | 'auto' | 'dependency' | 'manual' | {Function}
excludeChunks	{Array.<string>}	``	Allows you to skip some chunks (e.g don't add the unit-test chunk)
xhtml	{Boolean}	false	If true render the link tags as self-closing (XHTML compliant)

3、Friendly-errors-webpack-plugin

描述：Friendly-errors-webpack-plugin识别某些类型的webpack错误并清理，聚合和优先级，以提供更好的开发人员体验，当其捕捉到异常之后会在控制台和web页面进行打印。

使用方法：

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
{
entry:'',
...  //其他配置
plugins: [
    new FriendlyErrorsPlugin()
  ]
}

image.png