文章目录
1. 认识plugin
plugin
是什么?
- plugin是插件的意思,通常是用于对某个现有的架构进行扩展。
- webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等等。
loader和plugin区别
- loader主要用于转换某些类型的模块,它是一个转换器。有关loader的介绍可以查这篇博客:webpack中的loader
- plugin是插件,它是对webpack本身的扩展,是一个扩展器。
plugin的使用过程:
- 步骤一:通过npm安装需要使用的plugin(某些webpack已经内置的插件不需要安装)
- 步骤二:在webpack.config.js中的
plugins
中配置插件
下面进行代码演示,我使用的webpack的版本是 3.6.0
演示代码在页面底部有下载链接,供学习使用
代码目录结构:
2. 插件的使用案例
2.1 BannerPlugin插件
BannerPlugin
属于webpack自带的插件,可以为打包的文件添加版权声明。
在webpack.config.js中进行配置,plugins是一个数组,new一个插件即可。
//webpack.config.js
let webpack = require('webpack');
module.exports = {
// ... 其它配置
plugins:[
new webpack.BannerPlugin('最终版权归webchang所有')
]
}
打包程序,查看打包生成的文件头部:
2.2 html-webpack-plugin插件
目前,我们的index.html文件是存放在项目的根目录下的。
- 我们知道,在真实发布项目时,发布的是dist文件夹中的内容,但是dist文件夹中如果没有index.html文件,那么打包的js等文件也就没有意义了。
- 所以,我们需要将index.html文件打包到dist文件夹中,这个时候就可以使用
html-webpack-plugin
插件
html-webpack-plugin
插件可以为我们做这些事情:
- 在dist文件夹下自动生成一个index.html文件(可以提前指定模板来生成)
- 将打包的js文件,自动通过script标签插入到生成的index.html文件中的body中
安装:npm install html-webpack-plugin --save-dev
上面那种安装方式安装的是最新版的,和我的3.6.0版本的webpack不匹配,打包会报错,所以这个插件我使用的是3.2.0版本的。如何安装指定版本:
npm install html-webpack-plugin@3.2.0 --save-dev
配置:
//webpack.config.js
let webpack = require('webpack');
let HTMLWebpackPlugin = require