在之前的webpack学习中,我们将打包好的js文件引入html文件都是手动的,那么如何自动的将打包好的js文件与项目中的html文件关联呢?那么我们来介绍一下插件plugin。
一、安装plugin,我们在项目app-test下局部安装html-webpack-plugin,采用命令:npm install html-webpack-plugin --save-dev,安装成功显示信息为:
安装成功以在webpack.json文件里面devDependencies有显示html-webpack-plugin的版本,显示如下:
二、那么如何使用这个插件呢?
(1)我们在webpack.config.js文件里面引入:
const HtmlWebpackPlugin = require('html-webpack-plugin');
(2)然后在下面module.exports下面进行配置:
plugins:[
new HtmlWebpackPlugin()
]
现在webpack.config.js文件内容如下: