插件(plugin)是对现有框架的扩展,使用前需要安装和配置。
BannerPlugin
bannerplugin是webpack自带的插件,用于为打包的文件添加版权声明。
修改webpack.config.js
首先,引入webpack
const webpack = require('webpack');
然后,在module.exports模块添加 plugins节点,版权声明为:Copyright 2020 by zd
plugins:[
new webpack.BannerPlugin('Copyright 2020 by zd ')
]
重新打包,版权声明被添加到打包后的文件最上方,如下所示
html-webpack-plugin
目前,index.html是存放在项目的根目录下的。发布的dist目录下没有index.html,我们需要将index.html文件一起打包到dist目录下。HtmlWebpackPlugin插件就是来完成这项工作的。
HtmlWebpackPlugin插件可以根据模板自动生成index.html文件,并自动将打包后的js文件添加到body中。
通过命令,我的webpack的版本是3.6.0,根据webpack的版本,需要指定下版本,否则会报错。
npm install html-webpack-plugin@3.2.0 --save-dev
安装完成后,修改webpack.config.js
生成后,index.html也在dist目录下,因此,不需要指定publicPath,output中将publicPath删除。
HtmlWebpackPlugin还可以指定index.html模板,可以指定项目根目录中的index.html作为模板。
因为HtmlWebpackPlugin会自动将打包后的js文件添加到body中,因此,模板中对js文件的引用可以删除。
修改webpack.config.js,指定index.html模板,如下
plugins:[
new webpack.BannerPlugin('Copyright 2020 by zd '),
new HtmlWebpackPlugin({
template:'index.html'
})
]
重新打包,dist目录下根据模板添加了index.html,如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>
uglifyjs-webpack-plugin
在发布之前,往往需要对js等文件进行压缩处理,需要uglifyjs-webpack-plugin插件,为了与cli2保持一致,指定版本为1.1.1。
通过如下命令安装
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
安装完成后,修改webpack.config.js的配置,如下
重新打包,生成的js文件即被压缩,如下