使用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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
简单实现jquery焦点图
Dec 12 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
js判断密码强度的方法
Mar 18 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 Javascript
如何基于viewport vm适配移动端页面
Nov 13 Javascript
微信小程序实现点赞业务
Feb 10 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
php session 检测和注销
2009/03/16 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
使用PHP编写发红包程序
2015/07/22 PHP
php字符集转换
2017/01/23 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
Python中的面向对象编程详解(下)
2015/04/13 Python
理解Python中函数的参数
2015/04/27 Python
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
python抖音表白程序源代码
2019/04/07 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
Django接收自定义http header过程详解
2019/08/23 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
为什么说python适合写爬虫
2020/06/11 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
勇敢的心观后感
2015/06/09 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
PHP基本语法
2021/03/31 PHP
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android