webpack教程--02插件

webpack plugin

大家还记得在上一节中,下面这个index.html是我们手动创建的,其实没有必要手动,webpack有一个插件就可以帮我们做这个事情。

webpack教程--02插件

首先删掉这个html文件,然后在终端运行npm i -D html-webpack-plugin,打开package.json可以看到下面一行代码

webpack教程--02插件

在webpack.config.dev.js添加以下代码

webpack教程--02插件

接着npm run dev会出现下面文件

webpack教程--02插件

其实插件做的事远不止这些,我们可以在丰富一下这个插件的内容,注意一下这个index.html。我们希望生成的界面是基于这个的

webpack教程--02插件

添加以下代码

webpack教程--02插件

则会发现生成的html文件为

 webpack教程--02插件