一、webpack-dev-server
webpack-dev-server的官方介绍是:将webpack与提供实时重载的开发服务器一起使用。这仅应用于开发。也就是给我们提供一个可以实时重载的服务器,不需要我们改动代码后手动刷新,当然其中还提供了很多参数配置,有不同的作用。
const path=require('path')
const webpack=require('webpack') // 启用热更新 第二步
module.exports={
entry:path.join(__dirname,'./src/main.js'),
output:{
path:path.join(__dirname,'./dist'),
filename:'bundle.js'},
devServer:{
open:true,//自动打开浏览器
contentBase:"./", // 本地服务器在哪个目录搭建页面,一般我们在当前目录即可;
inline: true, // 用来支持dev-server自动刷新的配置,webpack有两种模式支持自动刷新,一种是iframe模式,一种是inline模式;使用iframe模式是不需要在devServer进行配置的,只需使用特定的URL格式访问即可;不过我们一般还是常用inline模式,在devServer中对inline设置为true后,当我们启动webpack-dev-server时仍要需要配置inline才能生效
hot: true, // 启用热更新, 第一步
host: HOST || config.dev.host,
port: PORT || config.dev.port
},
plugins: [
new webpack.HotModuleReplacementPlugin()//new 一个热更新的模块对象,启用热更新 第三步
]
}
二、–host 0.0.0.0
增加这个配置是为了便于开发移动端的时候我们可以直接在手机上通过ip访问我们的电脑(手机和电脑在统一wifi下)。