Articles of webpack dev middleware

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。