二、webpack 中的插件(不用每次 npm dev一下 才更新）

    1、webpack插件的作用
    通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack用起来更方便。最常用的webpack插件有如下两个：
    ①webpack-dev-server
    http://localhost:8080/ 相当与根目录 ，这个插件是放在内存上的 ，所以没有直接显示自动生成的js文件，但是搜索可得，更改进入的js文件是 直接（/然后加上js文件名）

    • 类似与node.js阶段用到nodemon工具
    • 每当修改了源代码，webpack会自动进行项目的打包和构建

    ②html-webpack-plugin

    • webpack中的HTML插件（类似与一个模块引擎插件）
    • 可以通过此插件自定制indev.html页面的内容

    2.1 安装webpack-dev-server
    （监听变化）
    运行如下的命令，即可在项目中安装此插件：
    npm install webpack-dev-server@3.11.2 -D

    2.2 配置webpack-dev-server

    ①修改package.json->scripts中的dev命令如下：
    "scripts":{
    "dev":"webpack serve", //script节点下的脚本，可以通过npm run 执行
    }

    ②再次运行npm run dev命令，重新进行项目的打包
    ③在浏览器中访问http://localhost:8080地址，查看自动打包效果

    注意：webpack-dev-server会启动一个实时打包的http服务器

    3.1 安装html-webpack-plugin
    （将index复制一份到首页）
    npm install html-webpack-plugin@5.3.2 -D

    3.2配置html-webpack-plugin
    ①导入html-webpack-plugin这个插件，得到插件的构造函数
    constHtmlPlugin=require('html-webpack-plugin')
    ②new构造函数，创建插件的实例对象
    consthtmlPlugin=newHtmlPlugin({
    //指定复制的文件名和路径
    template: './src/index.html',
    //指定 复制出来 的文件名和路径
    filename: './index.html'
    })
    ③插件的数组 ，将来webpack在运行时，会加载并调用这些插件
    plugins: [htmlPlugin]

    如图：
    image.png

    3.3解惑html-webpack-plugin
    ①通过HTML插件复制到项目根目录中的index.html页面，也被放到内存中
    ②HTML插件再生成的index.html页面，自动注入了打包的bundle.js文件
    （用http方式打开）

    4.devserver节点
    在webpack.config.js配置文件中，可以通过devserver节点对webpack-dev-server插件进行更多的配置，示例代码如下：
    devServer:{
    open:trun, 初次打包后 自动打开浏览器
    host:'127.0.0.1'指定运行的地址
    port:80, 在http协议中 如果端口号是80 则可以被省略
    }
    image.png