05webpack-webpack-dev-server时时跟新-第2种方式

 <!--14
        第一种方式 自动打开浏览器 端口号 指定托管的跟目录 启动热刷新  这种是在webpack.json中去配置的   
        直接在package中 写
        将“script”:{ "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"} 这里有4个指令
    -->
       
    <!-- 
       第二种方式   自动打开浏览器 端口号 指定托管的跟目录 启动热刷新  
       在webpack.config.js文件中

       第一步：引入webpack
       const webpack=require("webpack");

       第二步:配置
       devServer:{
           open:true,//自动打开浏览器
           port:3000,// 端口号
           contentBase:'src',// 指定托管的跟目录
           hot:true //启动热刷新
       }

       第三步：配置热刷新这个插件的节点
       plugins: [new webpack.HotModuleReplacementPlugin()]
       
       完整代码如下===》
       
       const path = require("path"); //路径模块
       
       //第2中方式配置webpack
       const webpack = require("webpack");
       
       // 配置文件 暴露出去哦 // 手动的指定入口和出口
       module.exports = {
       entry: path.join(__dirname, "./src/main.js"), //入口文件 使用webpack要打包哪一个文件
       
       output: {
       //输出相关的配置
       path: path.join(__dirname, "./dist"), //指定打包好的文件会输出到哪一个目录（dist)下去
       filename: "bundle.js" //指定打包好的文件的名称叫什么名字
       },
       
       devServer: {
       open: true, //自动打开浏览器
       port: 3000, //端口号
       contentBase: "src",
       hot: true
       },
       
       plugins: [new webpack.HotModuleReplacementPlugin()]
       
       };