webpack两种插件的使用

我们通过webpack进行打包项目时，会存在一些问题，当我们在终端中运行打包完成后，如果再次修改源代码，就需要重新在终端中运行打包，所以我们可以通过插件实时更新

一、插件webpack-dev-server

①安装插件：在要打包的项目根目录下打开终端，运行下面命令：

npm install webpack-dev-server@3.11.2 -D

安装成功后再在package.json的scripts中的dev中的值修改为如下：

"scripts" : {
    "dev" : " webpack serve"
}

然后就可以在终端中运行npm run dev(这里的dev对于上面package.json的scripts中的dev值，你哪里是什么就运行什么)

运行成功如下：

然后就复制上面的端口号，在浏览器打开，即可实时看到更新效果

二、html-webpack-plugin插件

webpack-dev-server插件存在一个问题，就是需要自己手动复制端口号，在浏览器中打开，所以我们新增一个html-webpack-plugin插件来解决这个问题

①安装：在终端中运行下面命令：

npm install html-webpack-plugin@5.3.2 -D

  ②配置：在webpack.config.js文件中添加以下代码：

//1.导入Html插件，得到一个构造函数 
const HtmlPlugin = require('html-webpack-plugin')
//2.创建Html的实例对象
const htmlPlugin = new HtmlPlugin({
    template:'./src/index.html'  //指定原文件的存放路径
    filename:'./index.html'  //指定生成的文件的存放路径
})
//3.引用
module.exports = {
    mode:'development',
    devServer:{
            open:true
            port:80 //端口号，可写可不写
            host:'127.0.0.1' //主机号，可写可不写
}
}