当前位置： 移动技术网 > IT编程>开发语言>JavaScript > webpack-dev-server的使用

webpack-dev-server的使用

2019年11月02日  | 移动技术网IT编程  | 我要评论

　　1.安装　

npm install webpack-dev-server --save-dev

　　ps:为保证webpack-dev-server能正常运行，请确认在本地项目中下载了webpack的包，可以通过package.json来查看有无下载

　　2.运行

　　1.使用npx命令运行

npx webpack-dev-server

　　2.使用npm运行

 　　　　1.首先配置package.json

//在script内新增dev键
  "scripts": {
    "test": "echo \"error: no test specified\" && exit 1",
    "build": "webpack",
    "dev":"webpack-dev-server --open --contentbase dist --hot"
  },
//参数说明
/*
   --open 执行命令时自动打开页面
   --contentbase dir 打开时显示的文件
   --hot    每次更新资源文件，不用更新所有资源，只更新部分，相当于加了一个补丁。 
*/

　　　　2.运行命令

npm run dev

　　3.修改引用包文件的页面文件（*.html）

<!doctype html>
<html>
  <head>
    <title>起步</title>
  </head>
  <body>
    <!-- 这里的路径要修改成根目录下，因为webpack-dev-server会生成一个虚拟的的包文件，位于根目录下 -->
    <script src="/bundle.js"></script>
  </body>
</html>

 

　　　　

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网