一.认识plugin
1.plugin是什么?
- plugin是插件的意思,通常是对某个现有的架构进行扩展
- webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等
2.loader和plugin的区别
- loader主要用于加载某些类型的模块,它是一个加载器
- plugin是插件,它是对webpack本身的扩展,是一个扩展器
3.plugin的使用
- 步骤一:通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
- 步骤二:在webpack.config.js中的plugins中配置插件
二.添加版权的plugin
为打包的文件添加版权声明,该插件名字叫BannerPlugin,属于webpack自带的插件
- 按照下面的方式修改webpack.config.js文件
const webpack = require('webpack')
module.exports={
...
plugins:[
new webpack.BannerPlugins('要输入的版权声明')
]
}
- 此时重新打包,查看bundle.js文件的头部,可以看到如下信息(例子)
三.打包html的plugin
目前,我们的index.html文件时存放在项目的根目录下的
- 而真实发布项目时,发布的是dist文件夹中的内容,但是dist文件夹中如果没有index.html文件,那么打包的js等文件就没有意义了
- 所以,我们需要将index.html文件打包到dist文件夹中,这个时候就需要HtmlWebpackPlugin插件
HtmlWebpackPlugin插件可以为我们做这些事情
- 自动生成一个index.html文件(可以指定模板生成)
- 将打包的.html文件,自动生成script标签插入到body中
安装HtmlWebpackPlugin插件:npm install html-webpack-plugin --save-dev
接着在webpack.config.js文件中plugins部分内容中添加:
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins:[
new webpack.BannerPlugins('要输入的版权声明'),
new htmlWebpackPlugin({
template:'index.html'
}),
]
四.js压缩的plugin
在项目发布之前,我们必然需要对js等文件进行压缩处理,我们使用一个第三方插件uglifyjs-webpack-plugin,并且指定版本号1.1.1,与CLI2保持一致npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
接着在webpack.config.js文件中plugins部分内容中添加:
const UglifyjsWebpackPlugin= require('uglifyjs-webpack-plugin')
plugins:[
new webpack.BannerPlugins('要输入的版权声明'),
new htmlWebpackPlugin({
template:'index.html'
}),
new UglifyjsWebpackPlugin()
]