继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

9、webpack从0到1-devServer初探

Ewall_
关注TA
已关注
手记 85
粉丝 7084
获赞 266

webpack从0到1-devServer初探

讲下解决每次修改文件后需要npm run build重复运行命令打包的问题。
git仓库:webpack-demo

1、问题

  • 每次修改完文件内容要编译代码时,需要重复手动运行npm run build就是件很麻烦的事情。
  • webpack中有几个不同的选项,可以帮助你在代码发生变化后自动编译代码,我这里主要说下第一、二种,相关内容webpack教程里都有
    • webpack’s Watch Mode
    • webpack-dev-server
    • webpack-dev-middleware

2、Watch模式

  • watch模式其实很简单,就是在package.json添加一行命令就行了,就能启动webpack的watch模式。
{
  "name": "webpack-easy-demo",
  "version": "1.0.0",
  "description": "webpack从0到1",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
+   "watch": "webpack --watch",
    "start": "webpack-dev-server"
  },
  ...
}
  • 然后我们使用npm run watch命令就可以实现打包,然后当我们修改文件内容,它也会帮我们自动再次打包实时监听。
  • 但是有一个缺点就是,他不会帮我们把浏览器自动刷新,所以我们一般使用webpack-dev-server这个插件来实现更加丰富的功能。

3、安装配置

  • 首先我们进入chapter9,安装这个插件:
$ cd chapter9
$ npm install webpack-dev-server --save-dev
  • 接下来我们需要配置它,进入webpack.config.js中,这个插件可以帮助我们在本地起一个服务器,devServer有一系列的参数可以用来配置这个插件。
    • devServer.contentBase指定提供给服务器的内容放在哪里。
    • devServer.port指定本地服务器的端口号。
    • devServer.open当我们启动服务的时候会自动帮我们打开默认的浏览器。
    • 还有很多配置项提供参考。。。–>devServer
var path = require('path');

module.exports = {
  //...
+  devServer: {
+   contentBase: path.join(__dirname, 'dist'),
+   port: 8080,
+   open: true
  }
};
  • 然后我们在package.json中设置一条新的命令。
{
  ...
  "scripts": {
    "build": "webpack",
+   "start": "webpack-dev-server"
  }
  ...
}
  • 配置完了,我们输入命令npm run start,这个打包过程的差异优越性体现在:
    • 首先,我们之前打包后的预览效果,就是直接打开dist/index.html,浏览器的地址为file:///Users/ewall/Desktop/webpack-demo/chapter9/dist/index.html
    • 现在我们使用它会帮我们自动打开浏览器且地址为http://localhost:8080/,它为我们起了一个新的服务器。
    • 输入命令npm run start命令打包启动服务后,终端不会结束这个进程,会一直监听,当我们修改文件内容,就自动重新打包然后帮我们刷新浏览器。
    • 当我们把dist目录删除后再执行这个命令,虽然浏览器中自动打开也能正常显示,但是不会有新的dist文件夹生成了,因为这个插件不会显式的重复输出生成dist文件了,而是为了提高效率放到了内存里。

3、webpack-dev-middleware

  • webpack-dev-middleware就是是一个中间件,用处就是可以把webpack打包后的文件传递给一个我们自建的服务器。
  • 比如在这个项目里用express框架搭个服务后啊之类的,我们就可以结合这个中间件做些事情。
  • webpack-dev-server里面也使用了这个插件,就不展开了,详见官网。

4、小结

  • 这节总的来说目的就是说了下如何来监听文件,让过程自动化,提高我们的开发效率。
  • 初步了解了下devServer这个强大的东西,下节我们进一步的了解它。

参考链接:
webpack-watch模式

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP