1. 命令配置方式一:直接在webpack-dev-server后面追加参数(推荐方式)
1. 编译之后自动打开页面
通过 --open 来实现
例如:"dev":"webpack-dev-server --open"
注意:修改package.json文件之后,需要重启webpack-dev-server
2. 修改端口号
通过 --port 来实现
例如:"dev":"webpack-dev-server --open --port 6666"
3. 设置默认根路径
通过 --contentBase 来实现
例如:"dev":"webpack-dev-server --open --port 6666 --contentBase src"
4. 设置热更新
通过 --hot 来实现
例如:"dev":"webpack-dev-server --open --port 6666 --contentBase src --hot"
注意:当不设置hot的时候,每编译一次都会重新生成boundle.js文件,如果启动热更新,那么,不会每次都生成boundle.js文件,提高了运行效率。
2. 命令配置方式二:将参数信息以配置文件的形式放到webpack.config.js中
在 webpack.confg.js中,添加一个节点 devServer配置对象
devServer:{ // 这里是配置dev-server命令参数的
// --open --port 6666 --contentBase src --hot
open:true, // 自动打开浏览器
port:7777, // 指定端口号
contentBase:'src', // 指定托管的根目录
hot:true // 启用热更新
}
注意:这时候,启动webpack-dev-server 会报错,是因为启动hot热更新比较麻烦,需要配置很多东西。
1. 就是在devServer中配置hot:true
2. 需要在webpack.config.js中引入webpack模块
const webpack = require('webpack');
3. 需要在和devServer平级的地方配置插件plugins
plugins:[ // 配置插件的节点
new webpack.HotModuleReplacementPlugin() // new 一个热更新的模块对象,
]
注意:在webpack-dev-server中,所有后缀为s的节点都是一个数组,vue中,只有props是数组,其他的都是对象