详解webpack-dev-server的简单使用


Posted in Javascript onApril 02, 2018

webpack-dev-server

webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外,它还有一个通过Sock.js来连接到服务器的微型运行时.

我们来看一下下面的配置文件(webpack.config.js)

var path = require("path");
module.exports = {
 entry:{
 app:["./app/main.js"]
 },
 output:{
 path:path.resolve(__dirname,"build"),
 publicPath:"/assets/",
 filename:"bundle.js"
}
}

这里你将你的源文件放在app文件夹下,并通过webpack将其打包到build文件夹下的bundle.js中.

注意:webpack-dev-server是一个独立的NPM包,你可以通过npm install webpack-dev-server来安装它.

基本目录

webpack-dev-server默认会以当前目录为基本目录,除非你制定它.

webpack-dev-server --content-base build/

上述命令是在命令行中执行的,它将build目录作为根目录.有一点需要注意的是:webpack-dev-server生成的包并没有放在你的真实目录中,而是放在了内存中.

我们在基本目录下新建一个index.html文件,然后在浏览器中输入http://localhost:8080访问.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script src="assets/bundle.js"></script>
</body>
</html>

自动刷新

webpack-dev-server支持两种模式来自动刷新页面.

  1. iframe模式(页面放在iframe中,当发生改变时重载)
  2. inline模式(将webpack-dev-sever的客户端入口添加到包(bundle)中)

两种模式都支持热模块替换(Hot Module Replacement).热模块替换的好处是只替换更新的部分,而不是页面重载.

iframe模式
使用这种模式不需要额外的配置,只需要以下面这种URL格式访问即可

http://«host»:«port»/webpack-dev-server/«path»

例如:http://localhost:8080/webpack-dev-server/index.html.

inline模式

inline模式下我们访问的URL不用发生变化,启用这种模式分两种情况:

1 当以命令行启动webpack-dev-server时,需要做两点:

  1. 在命令行中添加--inline命令
  2. 在webpack.config.js中添加devServer:{inline:true}

2 当以Node.js API启动webpack-dev-server时,我们也需要做两点:

  1. 由于webpack-dev-server的配置中无inline选项,我们需要添加webpack-dev-server/client?http://«path»:«port»/到webpack配置的entry入口点中.
  2. 将<script src="http://localhost:8080/webpack-dev-server.js"></script>添加到html文件中
var config = require("./webpack.config.js");
 var webpack = require('webpack');
 var WebpackDevServer = require('webpack-dev-server');

config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");

var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
 contentBase:'build/',
 publicPath: "/assets/"
});
server.listen(8080);

在Node中运行上面的代码即可。

注意:webpack配置中的devSever配置项只对在命令行模式有效。

(Hot Module Replacement)热模块替换

在命令行中运行inline模式,并启用热模块替换

这里只需要多增加 --hot指令就OK了.如下所示.

webpack-dev-server --content-base build --inline --hot

注意:命令行模式下,webpack.config.js中一定要配置output.publicPath来指定编译后的包(bundle)的访问位置.

在Nodejs API中运行inline模式,并启用热模块替换

这里需要做以下三点:

  1. 在webpack.config.js的entry选项中添加:webpack/hot/dev-server
  2. 在webpack.config.js的plugins选项中添加:new webpack.HotModuleReplacementPlugin()
  3. 在webpack-dev-server的配置中添加:hot:true

webpack-dev-server中的配置选项

var WebpackDevServer = require("webpack-dev-server");
var webpack = require("webpack");

var compiler = webpack({
 // configuration
});
var server = new WebpackDevServer(compiler, {
 // webpack-dev-server options

 contentBase: "/path/to/directory",
 // Can also be an array, or: contentBase: "http://localhost/",

 hot: true,
 // Enable special support for Hot Module Replacement
 // Page is no longer updated, but a "webpackHotUpdate" message is send to the content
 // Use "webpack/hot/dev-server" as additional module in your entry point
 // Note: this does _not_ add the `HotModuleReplacementPlugin` like the CLI option does. 

 // Set this as true if you want to access dev server from arbitrary url.
 // This is handy if you are using a html5 router.
 historyApiFallback: false,

 // Set this if you want to enable gzip compression for assets
 compress: true,

 // Set this if you want webpack-dev-server to delegate a single path to an arbitrary server.
 // Use "**" to proxy all paths to the specified server.
 // This is useful if you want to get rid of 'http://localhost:8080/' in script[src],
 // and has many other use cases (see https://github.com/webpack/webpack-dev-server/pull/127 ).
 proxy: {
 "**": "http://localhost:9090"
 },

 setup: function(app) {
 // Here you can access the Express app object and add your own custom middleware to it.
 // For example, to define custom handlers for some paths:
 // app.get('/some/path', function(req, res) {
 // res.json({ custom: 'response' });
 // });
 },

 // pass [static options](http://expressjs.com/en/4x/api.html#express.static) to inner express server
 staticOptions: {
 },

 // webpack-dev-middleware options
 quiet: false,
 noInfo: false,
 lazy: true,
 filename: "bundle.js",
 watchOptions: {
 aggregateTimeout: 300,
 poll: 1000
 },
 // It's a required option.
 publicPath: "/assets/",
 headers: { "X-Custom-Header": "yes" },
 stats: { colors: true }
});
server.listen(8080, "localhost", function() {});
// server.close();

参考:http://webpack.github.io/docs/webpack-dev-server.html

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

Javascript 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
一个JQuery写的点击上下滚动的小例子
Aug 27 Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
Jun 30 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
js 性能优化之快速响应的用户界面
Feb 15 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
vue实现循环滚动列表
Jun 30 Javascript
webpack v4 从dev到prd的方法
Apr 02 #Javascript
vue axios登录请求拦截器
Apr 02 #Javascript
webpack+react+antd脚手架优化的方法
Apr 02 #Javascript
vue axios请求超时的正确处理方法
Apr 02 #Javascript
JavaScript 日期时间选择器一些小结
Apr 02 #Javascript
vue计算属性及使用详解
Apr 02 #Javascript
vue小白入门教程
Apr 02 #Javascript
You might like
PHP PDO函数库详解
2010/04/27 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
javascript版2048小游戏
2015/03/18 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
Python3基础之基本数据类型概述
2014/08/13 Python
基于python实现学生管理系统
2018/10/17 Python
Python向excel中写入数据的方法
2019/05/05 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
Java面试笔试题大全
2016/11/23 面试题
初中升旗仪式演讲稿
2014/05/08 职场文书
运动会宣传口号
2014/06/09 职场文书
促销活动总结怎么写
2014/06/25 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
食品质检员岗位职责
2015/04/08 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python