使用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 相关文章推荐
js下利用控制器载入对应脚本
Jul 17 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
Vue插件之滑动验证码用法详解
Apr 05 Javascript
vue中使用腾讯云Im的示例
Oct 23 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 Javascript
微信小程序自定义胶囊样式
Dec 27 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 命名空间实例说明
2011/01/27 PHP
十大使用PHP框架的理由
2015/09/26 PHP
php检查页面是否被百度收录
2015/10/28 PHP
原创javascript小游戏实现代码
2010/08/19 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
vue axios 二次封装的示例代码
2017/12/08 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
深入学习Python中的上下文管理器与else块
2017/08/27 Python
Python实现购物车购物小程序
2018/04/18 Python
python 将md5转为16字节的方法
2018/05/29 Python
Django教程笔记之中间件middleware详解
2018/08/01 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
python设置随机种子实例讲解
2019/09/12 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
英国床垫在线:Mattress Online
2016/12/07 全球购物
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
老师对学生的寄语
2014/04/09 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
学校百日安全活动总结
2015/05/07 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技