24 04月 2020

Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成很多丰富的功能。
如果我们需要在webpack中引入插件时，首先我们需要npm/cnpm安装需要的插件(内置插件不用安装)，其次要在webpack配置文件webpack.config.js中的plugins关键字部分添加该插件的一个实例去配置这个插件


这里就以添加一个版本声明的插件为例，在webpack.config.js中配置版本说明。

image.png


这里要注意的是，如果我们需要用到插件时，在配置文件中的头部必须要引入webpack，然后下面才可以用这个插件


打包后的js文件中会出现我们添加的版权字样。

image.png



HtmlWebpackPlugin

这个插件的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）


安装

npm install --save-dev html-webpack-plugin


接下来我们要修改我们的项目让插件自动帮我们生成文件

1、移除public文件夹中的所有文件，利用此插件，index.html文件会自动生成，此外CSS已经通过前面的操作打包到JS中了。

2、在app目录下，创建一个index.tmpl.html文件模板，这个模板包含html、head、body等必须元素，在编译过程中，插件会依据此模板生成最终的html页面，会自动添加所依赖的 css, js，favicon等文件。
修改后的项目目录和index.tmpl.html中的模板源代码如下：

image.png

<!-- index.tmpl.html -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpackDemo</title>
</head>
<body>
    <div id='root'>
    </div>
</body>
</html>


更新webpack的配置文件webpack.config.js

image.png