详解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 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
Bootstrap中data-target 到底是什么
Feb 14 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
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开发文档 会员收费1期
2012/08/14 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
使用PDB模式调试Python程序介绍
2015/04/05 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
东方电视购物:东方CJ
2016/10/12 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
const和static readonly区别
2013/05/20 面试题
母亲追悼会答谢词
2014/01/27 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
主要负责人任命书
2014/06/06 职场文书
停课通知书
2015/04/24 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
详解java如何集成swagger组件
2021/06/21 Java/Android
MySQL中连接查询和子查询的问题
2021/09/04 MySQL