Articles of webpack dev middleware

当我刷新的时候,Webpack-dev-middleware会返回一个404

我正在尝试使用react-redux-app来设置webpack-dev-middleware。 如果我刷新了主页,我收到了200个状态码。 但是,如果我刷新任何其他页面('/login'),我会得到一个404错误。 谷歌search后,我发现这在Github上 : var express = require('express'); var app = express(); var webpack = require('webpack'); var path = require('path'); var compiler = webpack(require('./webpack.config.js')); app.use(require('webpack-dev-middleware')(compiler, { noInfo: true, publicPath: '/' })); app.use('*', function (req, res, next) { var filename = path.join(compiler.outputPath,'index.html'); compiler.outputFileSystem.readFile(filename, function(err, result){ if (err) { return next(err); } res.set('content-type','text/html'); res.send(result); res.end(); }); […]

Webpack,开发中间件和静态文件

我有一个Web服务/ React / Redux项目与快递服务,我有一些麻烦理解他们如何融合在一起。 我的快车应用程序运行Webpack并提供我的根index.html文件,如下所示: const app = express(); const server = require("http").createServer(app); app.use(bodyParser.json()); app.use("/some/path", express.static(path.join(__dirname, "/public"))); // webpack middleware const compiler = webpack(webpackConfig); const webpackDevMid = require("webpack-dev-middleware"); const webpackHotMid = require("webpack-hot-middleware"); app.use(webpackDevMid(compiler, { noInfo: true, publicPath: webpackConfig.output.publicPath // '/static/' })); app.use(webpackHotMid(compiler)); app.get("/", (req, res) => { if (!req.cookies.access_token) return res.redirect("/login"); return res.sendFile(path.join(__dirname, "index.html")); }); […]

Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs等

我开始与webpack一起使用一个node/express环境来开发一个带有react-router的ReactJS服务器端应用程序。 每个webpack软件包在dev和prod(运行时)环境中的作用我都很困惑。 以下是我的理解总结: webpack :是一个包,一个工具,将不同的Web应用程序组合在一起,然后捆绑到一个.js文件(通常是bundle.js )中。 然后将结果文件提供给prod环境以由应用程序加载,并包含运行代码所需的全部组件。 function包括缩小代码,缩小等。 webpack-dev-server :是一个提供服务器来处理网站文件的软件包。 它还从客户端组件构build一个.js文件( bundle.js ),但将其存储在内存中。 如果还有选项( -hot )来监视所有的构build文件,并且在代码改变的情况下在内存中build立一个新的bundle。 服务器直接在浏览器中提供(例如: http:/localhost:8080/webpack-dev-server/whatever )。 内存加载,热处理和浏览器服务的结合,让用户在代码更改时能够在浏览器上更新应用程序,是开发环境的理想select。 如果我对上述文字有疑问,我真的不确定下面的内容,所以如果有必要请告诉我 当使用webpack-dev-server和node/express时,一个常见的问题是webpack-dev-server是一个服务器,和node/express 。 这使得这个环境很难运行客户端和一些节点/快速代码(一个API等)。 注:这是我所面对的,但将是很好理解为什么会发生在更多的细节… webpack-dev-middleware :这是一个与webpack-dev-server具有相同function的中间件(inmemory bundling,hot reloading),但格式可以注入到server/express应用程序中。 这样,节点服务器中就有一种服务器( webpack-dev-server )。 糟糕:这是一个疯狂的梦吗? 这件作品如何解决开发和生产方程式,使生活更简单 webpack-hot-middleware :这个… 卡在这里…当findwebpack-dev-middleware时候发现了这一块…不知道如何使用它。 ENDNOTE:对不起有没有错误的想法。 我真的需要帮助,以便在复杂的环境中展现这些变体。 如果方便,请添加更多的包或数据,将构build整个scheme。