使用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 判断数组是否已包含了某个元素的函数
May 30 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
Nov 21 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
sails框架的学习指南
Dec 22 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
vue项目中axios使用详解
Feb 07 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 Javascript
Vue开发环境跨域访问问题
Jan 22 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 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 输出双引号"与单引号'的方法
2010/05/09 PHP
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
记录PHP错误日志 display_errors与log_errors的区别
2012/10/09 PHP
探讨捕获php错误信息方法的详解
2013/06/09 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
jquery 插件 人性化的消息显示
2008/01/21 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
临床医学专业毕业生的自我评价
2013/10/17 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
党委工作总结2015
2015/04/27 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
素质教育学习心得体会
2016/01/19 职场文书
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫