使用webpack3.0配置webpack-dev-server教程


Posted in Javascript onMay 29, 2018

最近正在研究webpack,听说webpack可以自己搭建一个小型的服务器(使用过vue-cli的朋友应该都见识到过),所以迫不及待的想要尝试一下。不过,在实际操作中发现,用webpack搭建服务器仍有不少坑,一方面是由于自己对文档的不熟悉,不了解webpack-dev-server的运作模式;另一方面,在翻阅了不少博客和文章后,发现不少配置实际上都跑不起来(有可能是版本的原因,也有可能是我自己配置的原因)。所以我打算用webpack3.0把dev-server跑起来给大家演示一遍,顺便把一些配置和原理给大家讲清楚,这样就省的绕弯路了。

这里我就默认大家都已经安装了webpack以及自己需要使用的loader和plugins,由于webpack-dev-server是个独立的npm包,所以我们需要在npm下安装它: 

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

之后我们就可以在webpack.config.js中进行配置:

const path = require("path");
module.exports = {
   entyr:{
      ....... //设置入口文件
   },
   output:{
      ....... //设置出口文件
   },
   module:{
      ....... //配置loader,注意使用rules而不是loaders
   },
   plugins:[
      ....... //注意是数组
   ],
   devServer:{
      //我们在这里对webpack-dev-server进行配置
   }        
}

devServer中常用的配置对象属性如下:

1. contentBase:"./" // 本地服务器在哪个目录搭建页面,一般我们在当前目录即可;

2. historyApiFallback:true // 当我们搭建spa应用时非常有用,它使用的是HTML5 History Api,任意的跳转或404响应可以指向 index.html页面;

3. inline:true // 用来支持dev-server自动刷新的配置,webpack有两种模式支持自动刷新,一种是iframe模式,一种是inline模式;使用iframe模式是不需要在devServer进行配置的,只需使用特定的URL格式访问即可;不过我们一般还是常用inline模式,在devServer中对inline设置为true后,当我们启动webpack-dev-server时仍要需要配置inline才能生效,这一点我们之后再说;

4. hot:true // 启动webpack热模块替换特性,这里也是坑最多的地方,不少博客都将hot设置了true,我们姑且也设置为true,之后再看;

5. port:端口号(默认8080) // 这就不用我多说了吧;

事实上大概常用的配置也就这样,为了方便,我们在packjson中对webpack-dev-server的的启动进行一下设置:

"scripts": {
  ......
  ......
  "start":"webpack-dev-server --inline"
 },

别忘了在devServer中设置inline:true后这里也要设置一下!

这时我们打包后再运行服务器后应该发现index.html页面已经展示了,打包好后的js文件虽然出现在了src上,但并没有显示,打开控制台会发现如下报错:

使用webpack3.0配置webpack-dev-server教程

控制台显示:Hot Module Replacement is disabled;

奇怪?我们之前不是在devServer中设置了hot为true了吗?事实上,虽然不知道为什么,但是目前来说hot这个属性已经没有用了,使用热模块的话我们需要用到一个叫webpack.HotModuleReplacementPlugin的插件。所以我们的webpack.config.js需要加上这些:

const path = require("path");
const webpack = requier ("webpack");

module.exports = {
   entyr:{
      ....... //设置入口文件
   },
   output:{
      ....... //设置出口文件
   },
   module:{
      ....... //配置loader,注意使用rules而不是loaders
   },
   plugins:[
     new webpack.HotModuleReplacementPlugin()
      ....... //注意是数组
   ],
   devServer:{
     contentBase: "./", 
   historyApiFallback:true,
   inline:true,
   hot:true
   }        
}

这时我们再在bash上运行npm run start后发现服务器就搭建完成了!

使用webpack3.0配置webpack-dev-server教程

另外,还有一点值得注意的就是,webpack-dev-server所使用的bundle.js文件并不是webpack.config.js中output打包生成的bundle.js,而是使用webpack-dev-server自己打包生成的,这个文件不存在与output或其他路径中,而是存到了内存中,事实上webpack-dev-server所使用的那个bundle.js我们是看不到的!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 对象的定义方法
Jan 10 Javascript
Javascript 事件流和事件绑定
Jul 16 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
纯javascript制作日历控件
Jul 17 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
JS数组去重详情
Nov 07 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 #Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 #Javascript
Vue 全局loading组件实例详解
May 29 #Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 #Javascript
详解vue-cli项目中怎么使用mock数据
May 29 #Javascript
js统计页面上每个标签的数量实例代码
May 29 #Javascript
浅谈React的最大亮点之虚拟DOM
May 29 #Javascript
You might like
php设计模式 Observer(观察者模式)
2011/06/26 PHP
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
JS中表单的使用小结
2014/01/11 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
jquery选择器使用详解
2014/04/08 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
Python实现获取操作系统版本信息方法
2015/04/08 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
毕业求职自荐信格式是什么
2013/11/19 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
python 中的@运算符使用
2021/05/26 Python