关于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的更多相关文章

  1. 分离Webpack开发环境与生产环境的配置

    这是Webpack+React系列配置过程记录的第五篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  2. webpack 开发环境与生成环境的 配置

    写在前面 最近学习react,之前做vue项目的时候,一直都是拿来主义,浑浑噩噩,感觉不太好,趁学习react的机会,在顺带学习一下webpack.一般配置文件分两份,为开发环境和生成环境.有此区分, ...

  3. 记webpack下进行普通模块化开发基础配置(自动打包生成html、多入口多页面)

    写本记时(2018-06-25)的各版本 "webpack": "^4.6.0"  //可直接使用4x以上的开发模式,刷新很快 "webpack-de ...

  4. VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址

    转载地址: https://blog.csdn.net/gebitan505/article/details/58166055 VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址 前 ...

  5. [Webpack] Configure Prepack with Webpack

    Great improvements and optimizations can be made to the output of bundled code. Prepack provides the ...

  6. Webpack的使用指南-Webpack的常用解决方案

    说是解决方案实际上更像是webpack的插件索引. 写这一篇的目的是为了形成一个所以,将来要用时直接来查找即可. 1.自动构建HTML,可压缩空格,可给引用的js加版本号或随机数:html-webpa ...

  7. 带你走进webpack世界,成为webpack头号玩家。

    最近朋友圈被<头号玩家>刷爆了,斯皮尔伯格一个资深电影导演,把对过去经典的致敬,对未来的憧憬浓缩在这一部电影中,可以说让观众燃了起来. 观望整个前端开发,不断的演化,发展迅速.前端开发从最 ...

  8. 第四十八篇:webpack的基本使用(二) --安装和配置webpack-dev-server插件

    好家伙, 1.webpack中的默认约定 默认的打包入口文件为src  -->index.js 默认的输出文件路径为dist -->main.js 既然有默认,那么就说明肯定能改 2.en ...

  9. 第四十七篇:webpack的基本使用(一) --安装和配置webpack

    好家伙, 1.webpack的基本使用 写个例子:实现一个奇偶行变色列表 步骤如下: ① 新建项目空白目录,并运行 npm init-y命令,初始化包管理配置文件 package.json② 新建sr ...

  10. [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 ...

随机推荐

  1. [bzoj 2243]: [SDOI2011]染色 [树链剖分][线段树]

    Description 给定一棵有n个节点的无根树和m个操作,操作有2类: 1.将节点a到节点b路径上所有点都染成颜色c: 2.询问节点a到节点b路径上的颜色段数量(连续相同颜色被认为是同一段),如“ ...

  2. maven - 引用本地jar,进行jar包移动

    背景: 项目为maven工程,部分jar需要需用项目单独修改的本地jar包. 配置好scope后发现构建后引用的jar没有移动到对应的目录,百度后发现需要配置以下依赖 <plugin> & ...

  3. 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/ ...

  4. 分页功能的实现——Jdbc && JSP

    @目录 什么是分页 ? 两个子模块功能的问题分析 和 解决方案 有条件查和无条件查询的影响 和 解决方案 项目案例: mysql + commons-dbutils+itcast-tools+Base ...

  5. java 笔记 Thread.currentThread().getContextClassLoader() 和 Class.getClassLoader()区别

    查了一些资料也不是太明白两个的区别,但是前者是最安全的用法 打个简单的比方,你一个WEB程序,发布到Tomcat里面运行.首先是执行Tomcat org.apache.catalina.startup ...

  6. 开启属于你的GNOME桌面

    图片剪辑源自美剧<黑客军团>(英语:Mr. Robot) GNOME(GNU Network ObjectEnvironment)是一种GNU网络对象模型环境 ,GNU计划的一部分,目的为 ...

  7. python cookbook第三版学习笔记十三:类和对象(三)描述器

    __get__以及__set__:假设T是一个类,t是他的实例,d是它的一个描述器属性.读取属性的时候T.d返回的是d.__get__(None,T),t.d返回的是d.__get__(t,T).说法 ...

  8. 再起航,我的学习笔记之JavaScript设计模式02

    我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 我们 ...

  9. 【原创】01-1. 基于 checked 关于 attribute 和 property 的理解

    Attribute(属性) 和 Property(特性) Attribute(元素节点的属性),例如html中常用的class.title.align等(即:属性节点).而Property 是这个DO ...

  10. UE4 C++BeginPlay And BlueprintBeginPlay

    今天遇到了一个诡异的问题,经过几个小时的煎熬终于找到了原因.mmmp 如果有一个类AActorChild,这个AActorChild继承自AActor,再有一个蓝图类BPAActorChild. 蓝图 ...