webpack-dev-server
2021-03-30 本文已影响0人
湘兰沅芷
实现只要编辑项目源文件（JS、CSS、HTML等），刷新页面即可看到效果。
安装：
yarn add webpack-dev-server --save-dev
配置：package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server"
}
webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js'
},
mode: 'development',
devServer: {
contentBase: path.join(__dirname, 'dist'), //Nodejs内置全局变量，值为当前文件所在绝对路径 ，与dist连接起来，得到最终的资源输出路径
host: '8080',
hot: true
}
}
<!DOCTYPE html>
<html>
<head></head>
<script src="bundle.js"></script>
<body>
123
</body>
</html>
webpack-dev-server 可以看做一个服务者，他的主要作用是启动一个本地服务，接收浏览器的请求，然后将资源返回。当服务启动时，会先让webpack进行模块打包并将资源准备好。
wepack 打包每次都会生成bundle.js,webpack-dev-server只是把打包结果放在内存中，每次接收到请求就将内存中的打包结果返回给浏览器。
webpack-dev-server还有一个很便捷的特性就是live-reloading（自动刷新）
总结：webpack-dev-server作用是启动一个本地服务，处理打包资源与静态文件请求，live-reloading功能监听文件变化，自动化新页面提升开发效率
