webpack学习笔记-使用webpack搭建本地开发服务

webpack-dev-server

webpack-dev-serve 为你提供了一个本地服务器 web serve, 并且具有实时加载更新的更能。

首先下载 webpack-dev-serve

npm install webpack-dev-serve --save-dev

修改配置文件webpack.config.js

module.exports={
   sevServer:{
     host: 'localhost', // 启动服务器域名
     port: '8080', // 端口号
     open: true,  // 是否自动打开浏览器
   }
}

运行指令

npx webpack serve

使用 npx webpack serve不会有任何文件的输出，而是将bundle文件保留在内存中。

你也可以在package.json中配置运行命令

现在可以在命令行中运行 npm start 我们会看到浏览器自动加载页面，如果你更改src下的任何文件并保存他们，浏览器会自动更新。