Tag: webpack dev middleware
Webpack-dev-server找不到要提交的文件
我只是从webpack文档复制粘贴webpack-dev-server + express设置，但是它不起作用，因为服务器找不到要提供的文件。 这个设置有什么问题？ server.js const express = require('express'); const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware'); const app = express(); const config = require('../webpack.config.js'); const compiler = webpack(config); app.use(webpackDevMiddleware(compiler, { publicPath: config.output.publicPath })); /*app.use('/',express.static('public')) it works when used insted of webpack dev middleware */ // Serve the files on port 3000. app.listen(3000, function () […]
当我刷新的时候，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。
