详解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 相关文章推荐
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
WebPack基础知识详解
Jan 16 Javascript
js实现自定义路由
Feb 04 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
vue+Element-ui前端实现分页效果
Nov 15 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 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
2020最新CPU的性能排名
2020/04/02 数码科技
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
2016/06/29 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
vue实现循环切换动画
2018/10/17 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
Python之字典对象的几种创建方法
2020/09/30 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
五分钟演讲稿
2014/04/30 职场文书
科学发展观演讲稿
2014/09/11 职场文书
委托公证书格式
2015/01/26 职场文书
让世界充满爱观后感
2015/06/10 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
公历12个月名称的由来
2022/04/12 杂记