设为首页 收藏本站

运维网

 找回密码
 立即注册
查看: 1135|回复: 0

[经验分享]

[复制链接]
qq524061227

尚未签到
发表于 2017-7-14 15:25:13 | 显示全部楼层 |阅读模式
　　webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。webpack-dev-server官方文档
　　webpack-dev-server 主要提供两个功能：


  • 为静态文件提供服务
  • 自动刷新和热替换(HMR)
文件结构
　　

    |--src　　|    |--views
　　|       |--index.js
　　|       |--module_a
　　|           |--list.js
　　|       |--module_b
　　|           |--list.js
　　|--index.html
　　|--webpack.config.base.js
　　|--webpack.config.dev.js
　　

　　

文件内容
　　[/src/.../module_a/list.js]
　　

export function getName() {　　console.log("module_a_list");
　　
}
　　

　　[/src/.../module_a/list.js]
　　

export function getName() {　　console.log("module_b_list");
　　
}
　　

　　[/src/.../index.js]
　　

import * as a_list from "./module_a/list.js"　　
import * as b_list from "./module_b/list.js"
　　

　　
a_list.getName();
　　
b_list.getName();
　　

　　[/index.html]
　　

<html>　　

　　
<head>
　　<meta charset=&quot;UTF-8&quot;>
　　
</head>
　　
<body>
　　<h1>RUN WEBPACK_DEMO</h1>
　　<script src=&quot;/dist/app.js&quot;></script>
　　
</body>
　　

　　
</html>
　　

　　[/webpack.config.base.js]
　　

var webpack = require(&quot;webpack&quot;);　　
var path = require(&quot;path&quot;);
　　

　　
module.exports = {
　　cache: true,
　　debug: true,
　　entry: {
　　&quot;app&quot;: &quot;./src/views/index.js&quot;
　　},
　　output: {
　　filename: &quot;[name].js&quot;,
　　path: __dirname + &quot;/dist&quot;,
　　publicPath: &quot;/dist/&quot;
　　},
　　module: {
　　loaders: [
　　{
　　test: /.jsx?$/,
　　loader: &quot;babel&quot;,
　　query: {
　　presets: [&quot;react&quot;, &quot;es2015&quot;, &quot;stage-0&quot;],
　　cacheDirectory: true
　　},
　　exclude: /node_modules/
　　}
　　]
　　},
　　plugins: []
　　
}
　　

　　[/webpack.config.base.js]
　　

var webpack = require(&quot;webpack&quot;);　　
var webpackBase = require(&quot;./webpack.config.base.js&quot;);
　　

　　
var cfg = Object.assign(webpackBase, {
　　devtool: &quot;cheap-module-eval-source-map&quot;
　　
});
　　

　　
module.exports = cfg;
　　

webpack-dev-server


  • 　　首先需要全局安装webpack-dev-server
    　　

    npm i webpack-dev-server -g
  • 　　package.json配置scripts:
    　　

    &quot;scripts&quot;:{　　
    &quot;start&quot;:&quot;webpack-dev-server --config webpack.config.dev.js&quot;
    　　
    }

  • 　　执行npm start，输出如下：
    　　
    DSC0000.png

　　命令要求webpack-dev-server执行当前目录下webpack.config.dev.js文件，发布地址默认为localhost:8080


  • 　　浏览器访问http://localhost:8080，可以看到，项目根目录下的index.html开始运行
    　　
    DSC0001.png

  • 　　F12打开浏览器控制台，输出js文件log
    　　
    DSC0002.png

　　以上，一个简单的devServer配置就完成了

自动刷新
　　在实际开发中，我们往往有以下需求：
　　
1、每次修改代码后，webpack可以自动重新打包
　　
2、浏览器可以响应代码变化并自动刷新
　　
webpack-dev-server提供了两种自动刷新模式：iframe和inline

iframe
　　页面被嵌套在一个iframe下，代码发生改动后，iframe会重新加载
　　
使用此模式无需额外配置，只需访问http://localhost:8080/webpack-dev-server/index.html即可，显然webpack-dev-server默认的模式就是iframe


  • 　　浏览器访问http://localhost:8080/webpack-dev-server/index.html
    　　
    DSC0003.png

  • 　　修改js代码后保存，命令行log显示module_a/list.js变化导致app.js重新生成：
    　　
    DSC0004.png

  • 　　同时浏览器自动刷新，控制台输出如下：
    　　
    DSC0005.png

inline
　　此方式会将webpack-dev-server客户端加入到webpack入口文件的配置中。
　　
配置方式有两种：CLI配置和通过Node.js Api手动配置

1）CLI 方式
　　此方式比较简单，只需在webpack.dev.server启动的命令中加入--inline即可


  • 　　修改package.json中scripts配置，添加--inline：
    　　

    &quot;scripts&quot;:{　　
    &quot;start&quot;:&quot;webpack-dev-server --inline --config webpack.config.dev.js&quot;
    　　
    }

  • 　　重新运行npm start，浏览器访问http://localhost:8080即可，修改代码后保存，浏览器自动刷新

　　当然webpack-dev-server类似的命令还有很多，比如，我们就可以规定项目可访问的地址为http://localhost:9093：
　　

&quot;scripts&quot;:{　　&quot;start&quot;:&quot;webpack-dev-server --inline --host localhost --port 9093 --config webpack.config.dev.js&quot;
　　
}
　　

　　更多配置参考webpack-dev-server CLI文档

2）Node.js Api方式
　　此方式需要手动将webpack-dev-server客户端配置到webpack打包的入口文件中


  • 修改文件webpack.config.dev.js：
　　

var webpack = require(&quot;webpack&quot;);　　
var webpackBase = require(&quot;./webpack.config.base.js&quot;);
　　

　　

　　
var cfg = Object.assign(webpackBase, {
　　devtool: &quot;cheap-module-eval-source-map&quot;
　　
});
　　

　　
//entry
　　
Object.getOwnPropertyNames((webpackBase.entry || {})).map(function (name) {
　　cfg.entry[name] = []
　　//添加webpack-dev-server客户端
　　.concat(&quot;webpack-dev-server/client?http://localhost:9091&quot;)
　　.concat(webpackBase.entry[name])
　　
});
　　

　　
module.exports = cfg;
　　


  • 根目录添加文件devServer.js，用于创建服务器实例
　　

var path = require(&quot;path&quot;);　　
var webpack = require(&quot;webpack&quot;);
　　
var webpackDevServer = require(&quot;webpack-dev-server&quot;);
　　
var webpackCfg = require(&quot;./webpack.config.dev.js&quot;);
　　

　　
var compiler = webpack(webpackCfg);
　　

　　
//init server
　　
var app = new webpackDevServer(compiler, {
　　//注意此处publicPath必填
　　publicPath: webpackCfg.output.publicPath
　　
});
　　

　　
app.listen(9390, &quot;localhost&quot;, function (err) {
　　if (err) {
　　console.log(err);
　　}
　　
});
　　

　　
console.log(&quot;listen at http://localhost:9390&quot;);
　　


  • 修改package.json中scripts配置，通过执行devServer.js文件启动服务器：
　　

&quot;scripts&quot;:{　　&quot;start&quot;:&quot;node devServer.js&quot;
　　
}
　　


  • 重新运行npm start，浏览器访问http://localhost:9390即可，修改代码后保存，浏览器自动刷新
热替换(HMR)
　　当我们使用webpack-dev-server的自动刷新功能时，浏览器会整页刷新。
　　
而热替换的区别就在于，当前端代码变动时，无需刷新整个页面，只把变化的部分替换掉。
　　
配置的关键在于将webpack/hot/dev-server文件加入到webpack所有入口文件中。
　　
使用HMR同样同样有两种方式：CLI和Node.js Api

CLI方式
　　命令行配置比较简单，只需在自动刷新的基础上，加上--hot配置即可。
　　
此配置会自动将webpack/hot/dev-server添加到webpack所有入口点中。


  • 　　修改package.json中scripts配置，添加--hot：
    　　

    &quot;scripts&quot;:{　　
    &quot;start&quot;:&quot;webpack-dev-server --inline --hot --config webpack.config.dev.js&quot;
    　　
    }

  • 　　执行npm start，浏览器访问http://localhost:8080即可，当控制台出现如下信息，说明HMR配置成功
    　　
    DSC0006.png

Node.js Api方式
　　此方式需要手动将webpack/hot/dev-server配置到所有webpack入口文件中


  • 修改文件webpack.config.dev.js，添加webpack/hot/dev-server，添加插件HotModuleReplacementPlugin：
　　

var webpack = require(&quot;webpack&quot;);　　
var webpackBase = require(&quot;./webpack.config.base.js&quot;);
　　

　　

　　
var cfg = Object.assign(webpackBase, {
　　devtool: &quot;cheap-module-eval-source-map&quot;
　　
});
　　

　　
//entry
　　
Object.getOwnPropertyNames((webpackBase.entry || {})).map(function (name) {
　　cfg.entry[name] = []
　　//添加HMR文件
　　.concat(&quot;webpack/hot/dev-server&quot;)
　　.concat(&quot;webpack-dev-server/client?http://localhost:9390&quot;)
　　.concat(webpackBase.entry[name])
　　
});
　　

　　
//plugins
　　
cfg.plugins = (webpackBase.plugins || []).concat(
　　new webpack.optimize.OccurrenceOrderPlugin(),
　　//添加HMR插件
　　new webpack.HotModuleReplacementPlugin(),
　　new webpack.NoErrorsPlugin()
　　
)
　　

　　
module.exports = cfg;
　　


  • 根目录添加文件devServer.js，用于创建服务器实例，添加hot:true
　　

var path = require(&quot;path&quot;);　　
var webpack = require(&quot;webpack&quot;);
　　
var webpackDevServer = require(&quot;webpack-dev-server&quot;);
　　
var webpackCfg = require(&quot;./webpack.config.dev.js&quot;);
　　

　　
var compiler = webpack(webpackCfg);
　　

　　
//init server
　　
var app = new webpackDevServer(compiler, {
　　//注意此处publicPath必填
　　publicPath: webpackCfg.output.publicPath,
　　//HMR配置
　　hot:true
　　
});
　　

　　
app.listen(9390, &quot;localhost&quot;, function (err) {
　　if (err) {
　　console.log(err);
　　}
　　
});
　　

　　
console.log(&quot;listen at http://localhost:9390&quot;);
　　


  • 修改package.json中scripts配置，通过执行devServer.js文件启动服务器：
　　

&quot;scripts&quot;:{　　&quot;start&quot;:&quot;node devServer.js&quot;
　　
}
　　


  • 重新运行npm start，浏览器访问http://localhost:9390即可，当控制台出现如下信息，说明HMR配置成功　　
    DSC0007.png

　　可见，使用webpack-dev-server辅助开发，可以极大的方便前端调试。特别是在前后端分离的场景下，使前端可以更加灵活的构建自己的开发环境。

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表，该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有，请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意，请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息，一经发现立即删除。若您因此触犯法律，一切后果自负，我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集，我们仅提供一个展示、介绍、观摩学习的平台，我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责，亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏，不得用于商业或者其他用途，否则，一切后果均由您自己承担，我们对此不承担任何法律责任
7、如涉及侵犯版权等问题，请您及时通知我们，我们将立即采取措施予以解决
8、联系人Email：admin@iyunv.com 网址：www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址：https://www.yunweiku.com/thread-393828-1-1.html 上篇帖子： [计算机网络]简易http server程序 下篇帖子： 学生各门课程成绩统计SQL语句大全(面试题)
回复

使用道具 举报

返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群，最新一手资源尽在官方微信交流群！快快加入我们吧...

扫描微信二维码查看详情

客服 E-mail:iyunvcom@gmail.com

本站由青云提供云计算服务

运维网--中国最专业的运维工程师交流社区

豫ICP备20007574号-1 Copyright © 2012-2025

关于我们

发展历程

联系我们

关注我们

广告服务

广告案例

隐私条款

免责声明

用户登录

用户注册

版主守则

申请版主

手机版

金币获取

帮助中心

每日签到

Good Good

Study

Day Day

UP


客服E-mail:kefu@iyunv.com 客服QQ：1061981298


QQ群⑦：运维网交流群⑦ QQ群⑧：运维网交流群⑧ k8s群：运维网kubernetes交流群


提醒：禁止发布任何违反国家法律、法规的言论与图片等内容；本站内容均来自个人观点与网络等信息，非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来，其版权均归原作者及其网站所有，我们尊重他人的合法权益，如有内容侵犯您的合法权益，请及时与我们联系进行核实删除！



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表