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
