使用webpack-dev-middleware 和 webpack-hot-middleware 配置一个dev-server
关于Webpack的资料教程网上已经数不胜数,但是对手动配置一个Express server的确不多,于是我对此进行着重的了解一番。
webpack-dev-middleware和webpack-hot-middleware分别是干什么的?
首先这两个插件组合起来是可以实现页面的热刷新工作, 而做到这一点,首先要对更改的文件进行监控,编译,而这个webpack-dev-middleware就是干这个的,专业点叫做伺服器,而webpack-hot-middleware 是用来进行页面的热重载的。而且这些文件资源并不会出现在真实的路径里,而是保存在内存中,如果文件改变,这个伺服器就不在去请求旧的文件,而是延迟请求直到新的文件编译完成。
开始编码
你可以使用一份你之前练手的webpack项目,写好正确的配置文件(webpack.config.js),基本上会和下面的我的这份类似,并没有太多的东西:
var path = require("path");
var webpack = require("webpack");
//var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {entry: "./src/js/page/index.js",
output:{
path : path.join(__dirname,'dist'),
publicPath : "/webpack/dist",
filename : "js/[name].js"
},
module:{
loaders:[
{ test: /\.css$/, loader: 'style-loader!css-loader' }
]
},
plugins:[
//new ExtractTextPlugin("css/[name].css"),new HtmlWebpackPlugin({
filename:'index.html',
template:'./src/view/index.html',
inject:true,
hash:true,
minify:{
removeComments:true,
collapseWhitespace:false
}
})
]
}
使用webpack-dev-middleware
下面在跟目录下新建一个dev-server.js,然后写下如下的代码:
const path = require("path")
const express = require("express")
const webpack = require("webpack")
//使用前别忘了install
const webpackDevMiddleware = require("webpack-dev-middleware")
const webpackConfig = require('./webpack.config.js') const app = express(),
DIST_DIR = path.join(__dirname, "dist"),
PORT = 9090,
complier = webpack(webpackConfig) app.use(webpackDevMiddleware(complier, {
publicPath: webpackConfig.output.publicPath,
quiet: true
})) app.get("*", (req, res, next) =>{
const filename = path.join(DIST_DIR, 'index.html'); complier.outputFileSystem.readFile(filename, (err, result) =>{
if(err){
return(next(err))
}
res.set('content-type', 'text/html')
res.send(result)
res.end()
})
}) app.listen(PORT)
complier = webpack(webpackConfig)会创建一个用来传给webpack-middle-ware的对象,同时我们还可以给他webpack-middle-ware传一些option,比较重要的是这个publicPath, 这个是必传的参数,通常是和你的webpack.config.js
里的publicPath是一致的,然后通过
app.get("*", (req, res, next) =>{
const filename = path.join(DIST_DIR, 'index.html'); complier.outputFileSystem.readFile(filename, (err, result) =>{
if(err){
return(next(err))
}
res.set('content-type', 'text/html')
res.send(result)
res.end()
})
})
这段代码来告诉express去读取文件,这里我并没有直接使用下面这种方式:
app.get("*", (req, res) => {
res.sendFile(path.join(DIST_DIR, "index.html"));
});
这样直接发送文件,因为所有的文件是在内存中的,我们直接去目录里去读是不对的,所以采用上面的方式手动指定文件的加载目录在哪里。
Hot Module Replacement
现在我们已经集成了webpack-dev-middleware,使用这个插件很简单,在webpack.config.js里的入口和插件里进行相应修改:
...
entry: ["webpack-hot-middleware/client", "./main"],
...
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
修改entry的原因是我们要配置当文件更新时通知服务器:
然后接下来在Express里配置使用webpack-hot-middleware
import webpackHotMiddleware from "webpack-hot-middleware";
...
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}));
...
app.use(webpackHotMiddleware(compiler));
到这里就已经配置好了,在package.json里添加一个脚本:
"start": "node dev-server.js"
但是事实上这时候你运行npm start 的时候并不能实时刷新,因为
只有接受更新的module才会被热更新过,我们需要所有的文件都热更新,所以在入口文件(我的是./js/page/index.js)里面加上:
if (module.hot) {
module.hot.accept();
}
这时候就可以实时刷新了。
坑:
当你使用ExtractTextPlugin时,因为这个插件本身的原因,修改css文件是不会更新的,所以在dev的时候可以不使用这个插件。
注:本文出自博客园 https://home.cnblogs.com/u/mdengcc/ ,转载请注明出处。
使用webpack-dev-middleware 和 webpack-hot-middleware 配置一个dev-server的更多相关文章
- 分离Webpack开发环境与生产环境的配置
这是Webpack+React系列配置过程记录的第五篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- webpack 开发环境与生成环境的 配置
写在前面 最近学习react,之前做vue项目的时候,一直都是拿来主义,浑浑噩噩,感觉不太好,趁学习react的机会,在顺带学习一下webpack.一般配置文件分两份,为开发环境和生成环境.有此区分, ...
- 记webpack下进行普通模块化开发基础配置(自动打包生成html、多入口多页面)
写本记时(2018-06-25)的各版本 "webpack": "^4.6.0" //可直接使用4x以上的开发模式,刷新很快 "webpack-de ...
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
转载地址: https://blog.csdn.net/gebitan505/article/details/58166055 VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址 前 ...
- [Webpack] Configure Prepack with Webpack
Great improvements and optimizations can be made to the output of bundled code. Prepack provides the ...
- Webpack的使用指南-Webpack的常用解决方案
说是解决方案实际上更像是webpack的插件索引. 写这一篇的目的是为了形成一个所以,将来要用时直接来查找即可. 1.自动构建HTML,可压缩空格,可给引用的js加版本号或随机数:html-webpa ...
- 带你走进webpack世界,成为webpack头号玩家。
最近朋友圈被<头号玩家>刷爆了,斯皮尔伯格一个资深电影导演,把对过去经典的致敬,对未来的憧憬浓缩在这一部电影中,可以说让观众燃了起来. 观望整个前端开发,不断的演化,发展迅速.前端开发从最 ...
- 第四十八篇:webpack的基本使用(二) --安装和配置webpack-dev-server插件
好家伙, 1.webpack中的默认约定 默认的打包入口文件为src -->index.js 默认的输出文件路径为dist -->main.js 既然有默认,那么就说明肯定能改 2.en ...
- 第四十七篇:webpack的基本使用(一) --安装和配置webpack
好家伙, 1.webpack的基本使用 写个例子:实现一个奇偶行变色列表 步骤如下: ① 新建项目空白目录,并运行 npm init-y命令,初始化包管理配置文件 package.json② 新建sr ...
- [Webpack] Use the Webpack Dashboard to Monitor Webpack Operations
Learn how to use the new Webpack Dashboard from Formidable Labs to display a pretty, useful output f ...
随机推荐
- [bzoj 2243]: [SDOI2011]染色 [树链剖分][线段树]
Description 给定一棵有n个节点的无根树和m个操作,操作有2类: 1.将节点a到节点b路径上所有点都染成颜色c: 2.询问节点a到节点b路径上的颜色段数量(连续相同颜色被认为是同一段),如“ ...
- maven - 引用本地jar,进行jar包移动
背景: 项目为maven工程,部分jar需要需用项目单独修改的本地jar包. 配置好scope后发现构建后引用的jar没有移动到对应的目录,百度后发现需要配置以下依赖 <plugin> & ...
- org.apache.hadoop.security.AccessControlException: Permission denied: user=?, access=WRITE, inode="/":hadoop:supergroup:drwxr-xr-x 异常解决
进行如下更改:vim /usr/local/hadoop/etc/hadoop/hdfs-site.xml[我的hadoop目录在/usr/local下,具体的是修改你的hadoop目录中的/etc/ ...
- 分页功能的实现——Jdbc && JSP
@目录 什么是分页 ? 两个子模块功能的问题分析 和 解决方案 有条件查和无条件查询的影响 和 解决方案 项目案例: mysql + commons-dbutils+itcast-tools+Base ...
- java 笔记 Thread.currentThread().getContextClassLoader() 和 Class.getClassLoader()区别
查了一些资料也不是太明白两个的区别,但是前者是最安全的用法 打个简单的比方,你一个WEB程序,发布到Tomcat里面运行.首先是执行Tomcat org.apache.catalina.startup ...
- 开启属于你的GNOME桌面
图片剪辑源自美剧<黑客军团>(英语:Mr. Robot) GNOME(GNU Network ObjectEnvironment)是一种GNU网络对象模型环境 ,GNU计划的一部分,目的为 ...
- python cookbook第三版学习笔记十三:类和对象(三)描述器
__get__以及__set__:假设T是一个类,t是他的实例,d是它的一个描述器属性.读取属性的时候T.d返回的是d.__get__(None,T),t.d返回的是d.__get__(t,T).说法 ...
- 再起航,我的学习笔记之JavaScript设计模式02
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 我们 ...
- 【原创】01-1. 基于 checked 关于 attribute 和 property 的理解
Attribute(属性) 和 Property(特性) Attribute(元素节点的属性),例如html中常用的class.title.align等(即:属性节点).而Property 是这个DO ...
- UE4 C++BeginPlay And BlueprintBeginPlay
今天遇到了一个诡异的问题,经过几个小时的煎熬终于找到了原因.mmmp 如果有一个类AActorChild,这个AActorChild继承自AActor,再有一个蓝图类BPAActorChild. 蓝图 ...