1-4 webapack4配置-mac环境下配置webpack-dev-server

1.webpack-dev-server有什么作用？
webpack-dev-server是用来配置本地服务器的，用它可以为webpack打包的资源文件提供web服务。
webpack-dev-server主要提供两个功能：
1）为静态文件提供web服务（它会将webpack打包的资源文件部署到本地服务器上）
2）自动刷新和热替换（自动刷新就是当我们修改了代码以后，webpack会进行自动编译，之后就会自动更新网页的内容，不需要手动刷新。热替换就是当我们运行时更新各种模块而不想要完全刷新时可以实现局部刷新。）

2.安装webpack-dev-server：
1）在终端进入到项目目录，输入命令npm install --save-dev webpack-dev-server，如下图：2）配置webpack.config.js文件，里面加入devServer的内容：

const path = require('path');


module.exports = {
	// path指文件打包后存放的路径
	entry:'./public/index.js',
	output:{
		//path.resolve()方法将路径或路径片段的序列处理成绝对路径
		//__dirname表示当前文件所在目录的绝对路径
		path:path.resolve(__dirname,'build'),
		//filename是打包后的文件名称
		filename:'[name].js'
	},
	devServer:{
		contentBase:'./build',//设置服务器访问的基本目录,就是我们打包完成的目录
		host:'localhost',//服务器的IP地址
		port:8080,//端口号
		open:true,//自动打开页面
	}
}

3）配置package.json文件，里面加入"start":“webpack-dev-server --mode development”

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "\"webpack4\"",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start":"webpack-dev-server --mode development"
  },
  "author": "\"xutian\"",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }
}

4）终端运行npm run dev进行打包，再运行npm run start就会直接打开网页。如果你再去修改代码，网页就会自动刷新。