Webpack热更新打包启动项目

webpack实现自动打开浏览器、热更新和配置浏览器的默认端口号

方式1：

修改package.json的script节点如下，
--open 表示自动打开浏览器;

--hot 表示启用浏览器热更新;

--host 域名 表示启用浏览器域名;

--port 端口号 表示打开的端口号;

--static "路径" 表示打开的路径;

"dev": "webpack-dev-server --open --hot --static ./src --host 127.0.0.1 --port 3003 "

使用npm run dev来打包启动项目

方式2：

修改webpack.config.js文件，新增devServer节点如下：

open : true/false; 表示自动打开浏览器;

hot : true/false; 表示启用浏览器热更新;

host : "域名"; 表示启用浏览器域名;

port : "端口号"; 表示打开的端口号;

static : "路径"; 表示打开的路径;

var path = require("path");
module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "./src/index.js"),
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
  },
  devServer: {
    static: "./src",
    open: true,
    hot: true,
    port: "3301",
    host: "127.0.0.1",
  },
};

使用npm run dev来打包启动项目