插件使用01
最后更新于：2022-04-02 05:32:29
[TOC]
## 前言
通过本文你将熟悉并掌握webpack中常用的插件的使用以及其配置。
## 概念解读
插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
## 插件与loader区别
> Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程起作用。
## 使用插件的方法
要使用某个插件，我们需要通过npm安装它，然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例（plugins是一个数组）继续上面的例子，我们添加了一个给打包后代码添加版权声明的插件。
~~~
//安装插件
npm install html-webpack-plugin -D
//引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
//插件中配置
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin(),
],
}
~~~
## 常用插件枚举
### HtmlWebpackPlugin
主要用于依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。有了这个插件，我们便可以实现打包完成之后将资源路径注入到页面之中。（默认是吧output的文件注入到页面底部）
~~~
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html', // 配置输出文件名和路径
template: 'assets/index.html', // 配置文件模板
}),
],
~~~
vue-cli 中的相关插件使用：
~~~
//dev配置
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
//prod配置
new HtmlWebpackPlugin({
filename: config.prod.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency',
}),
~~~
常用的配置api如下：其他的如果需要可以去查看文档
| 字段 | 类型 | 默认 |备注 |
| --- | --- | --- | --- |
| filename | string | index.html |脚本或者样式注入文件的位置，也可以自己写 |
| template | string | - | 模板页面的位置 |
| inject | boolean /string | true | true或者body的时候，传到底部，如果是head，加载到顶部 |
| minify | boolean/string | true| 可以控制一些压缩页面的参数，比如去除注释，换行，属性引号 |
| chunksSortMode | {String\|Function} | auto| 'none' \| 'auto' \| 'dependency' \| 'manual' \| {Function}可以决定chunk压缩的模式 |
| chunks | {?} | ？ | 允许只加入一些chunk |
| cache | boolean |true | 只在文件发生改变的时候触发，否则使用缓存|
| title | string | '' |生成页面使用的标题 |
- [html-webpack-plugin模块介绍](https://npm.taobao.org/package/html-webpack-plugin)
### webpack.DefinePlugin
定义插件，webpack自带的插件，允许你创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。比如,你可能会用一个全局的常量来决定 log 在开发模式触发而不是发布模式。这仅仅是 DefinePlugin 提供的便利的一个场景。
另外我们也可以添加另外的一些api请求地址，转发地址等，这样就不用额外引入配置文件的部分了。只要你有这样的场景，就去使用吧。
**注意事项** ：因为这个插件直接做的文本替换,给定的值必须包含字符串本身内的实际引号。通常，有两种方式来达到这个效果，使用 '"production"', 或者使用 JSON.stringify('production')。
~~~
//基本语法
new webpack.DefinePlugin(definitions)
//示例，建议定义的字段大写
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object")
})
~~~
- 案例一 ：定义开发和生产环境的标志
~~~
new webpack.DefinePlugin({
'NICE_FEATURE': JSON.stringify(true),
'EXPERIMENTAL_FEATURE': JSON.stringify(false)
})
~~~
- 案例 二 ：定义你需要的web路径，api地址
~~~
new webpack.DefinePlugin({
'process.env': env,
'PROXY_WEB_PATH': config.build.PROXY_WEB_PATH,
'STATIC_WEB_PATH': config.build.STATIC_WEB_PATH,
'WAP_PATH': config.build.WAP_PATH,
}),
~~~
[定义插件介绍](http://www.css88.com/doc/webpack2/plugins/define-plugin/)
### webpack.optimize.UglifyJsPlugin
webpack内置集成的压缩js的插件，模块地址：https://npm.taobao.org/package/uglifyjs-webpack-plugin
基本使用：
~~~
//安装
npm i -D uglifyjs-webpack-plugin
//使用
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
plugins: [
new UglifyJsPlugin()
]
}
~~~
vue-cli中的配置使用 ：
~~~
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: true,
unused: false,
properties: false
},
sourceMap: false，
comments:false
}),
~~~
基本常用api介绍：
| 参数 |类型 | 默认 | 备注 |
| --- | --- | --- | --- |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
### 版权插件的实例
备注：这个插件是webpack内置的，直接使用就好。追加这个之后就会在打包之后的文件头部追加需要的文字说明。
~~~
var webpack=require("webpack");
module.exports={
plugins:[
new webpack.BannerPlugin("版权有责，翻版必究（xx技术部）")
]
}
// 最终生成的文字说明
/*! 版权所有，翻版必究（xx技术部） */
~~~
';