Articles of webpack hmr

webpack – 在服务器上重新加载热模块

Webpack热重载(webpack-hot-middleware)为客户提供了极好的服务。 它会在文件发生更改时重build和更新客户端上的资产。 但是对于服务器需要预渲染HTML响应的通用/同构服务器来说,这是非常困难的。 天真的解决scheme是,每当文件发生变化时,重新启动服务器(例如使用nodemon),但是这会closures所有的客户端连接,而对于大型服务器来说,这是非常缓慢的。 稍微好一点的解决scheme是手动观看资产(例如chokidar),并在文件更改后再次清除caching/需求。 但是,当需要监视依赖关系时,这需要更多的复杂性。 文件必须parsing以确定他们需要什么。 此外,如果代码库是以编译为js语言编写的,则最好运行编译服务器进行生产(不再有babel-node)。 使用编译的服务器,不再可能使用上述机制,因为: webpack对dynamic需求的支持很差: require(variable)而不是require('./file.js') 节点本身不需要代码 在我的例子中,我已经将require函数抽象成了一个使用babel-register ed require的包(之前我使用过babel API,但是依赖于很多未公开的节点源)。 这是我目前在https://github.com/edge/cyc中使用的解决scheme,这个解决scheme有点用处,但它是随意的,并且有很多警告。 一般来说,与webpack并行编写的定制代码越多,越偏离期望的行为。 有没有一个强大的方法来更容易地复制webpack的行为?

我可以使用sailsjs重新加载webpack的热模块吗?

我正在使用sails.js进行一个项目并作出反应 。 我希望能够使用Webpack的热模块更换,所以我可以编辑我的代码,并立即在浏览器上更改。 不过,我怎样才能把这一切联系起来似乎并不明显。 我希望能够使用$ sails lift并只是工作。 如果这是一个node.js项目,我简单地configurationwebpack使用react-transform-hmr并从package.json启动webpack-dev-server (例如这里所描述的 )。 但是,这似乎并不是一件非常有趣的事情。 我看到模块webpack-hot-middleware声称能够“在没有webpack-dev-server情况下将热重新加载到现有服务器”。 但是,我不确定在Sails> 0.10中添加Express中间件configuration的适当位置在哪里。 任何人都可以推荐一个好的方法来设置这个?

让webpack热点更新在我的同构web应用程序中正常工作

我正在创build一个节点/expression后端和反应前端的Web应用程序。 我(我想)大部分已经启动并运行了,但让浏览器执行热点刷新的最后一步并不像预期的那样工作。 我会尽力在这里发布所有相关的设置。 请让我知道,如果你需要别的什么来找出我犯了什么错误: 我用node ./server/index.js启动我的应用程序 webpack.config.js var path = require('path'); var webpack = require('webpack'); let webpackConfig = { name: 'server', output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js', publicPath: '/dist/', }, resolve: { extensions: [ '', '.js', '.jsx', '.json' ] }, module: { loaders: [ { test: /\.(js|jsx)$/, loader: 'babel-loader', exclude: /node_modules/, query:{ presets: ['es2015', […]

在服务器端可以用NGINX使用Webpack-Hot-Middleware吗?

我正在为一个客户端的项目工作,我需要使用webpack的热模块更换function。 我在NGINX后面使用了一个express(节点)应用程序。 我正在使用许多JavaScript框架来devise应用程序,React恰好是其中之一。 我将使用HMRfunction。 我有这样的webpack.config.js: var webpack = require('webpack'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var merge = require('webpack-merge'); var validate = require('webpack-validator'); var CleanWebpackPlugin = require('clean-webpack-plugin'); var styleLintPlugin = require('stylelint-webpack-plugin'); //breaking up into smaller modules //commons module //first var start = { context : __dirname , //entry point defination entry : { app : ['./require.js','webpack-hot-middleware/client?https:127.0.0.1:8195'], vendor […]

Webpack HMR抛出响应由于jsPDF造成的syntheticEvent错误

系统信息: OSX 10.12.4 Sierra Node v7.10.0 npm v4.2.0 浏览器已testing: Chrome 58.0.3029.110 Safari 10.1 Firefox 53.0 问题: 我有一个应用程序在我已经克隆的生产中有效地运行,并且正在尝试更新以准备构build续作。 但是,我已经遇到了一个奇怪的Webpack问题,通过更新它/ React / HMR到更新的版本。 HMR将连接,并且Webpack似乎编译得很好。 但是,与页面交互(如单击)会生成以下错误: 显然,该应用程序在这一点上不再起作用,因为点击事件不会引发任何事情。 有趣的是,我们在Node控制台和浏览器中也得到了以下404错误: (注:这似乎是一个巨大的查询string,包括函数,特别是引用syntheticEvent。如果你愿意,我可以打印整个东西) NODE v6.3.1 相关的NPMs: "react": "^15.5.4", "react-dom": "^15.5.4", "react-transform-catch-errors": "^1.0.0", "react-transform-hmr": "^1.0.4", "webpack": "^2.5.1", "webpack-dev-middleware": "^1.10.2", "webpack-hot-middleware": "^2.18.0" "babel-cli": "^6.11.4", "babel-core": "^6.24.1", "babel-eslint": "^7.2.1", "babel-loader": "^7.0.0", "babel-plugin-array-includes": "^2.0.0", "babel-plugin-transform-decorators-legacy": "^1.0.0", […]

无效的HMR消息错误Webpack

我从Webpack收到以下错误: Invalid HMR message随后是一个非常详细的JSONstring。 实际上我没有find更好的debugging资源。 有小费吗? 奖金,如果任何人都可以给我洞察,为什么require不能被发现,当它在整个应用程序中使用没有问题。 这里有一些细节: 运行Node / Babel 使用Webpack NPM依赖关系: "dependencies": { "babel-core": "^6.7.2", "babel-polyfill": "^6.7.4", "body-parser": "~1.12.0", "cookie-parser": "~1.3.4", "css-modules-require-hook": "^4.0.0", "cuid": "^1.3.8", "debug": "~2.1.1", "express": "~4.12.2", "fs": "0.0.2", "react": "^0.14.7", "react-dom": "^0.14.7", "react-redux": "^4.4.1", "react-router": "^2.0.1", "redux": "^3.3.1", "serve-favicon": "~2.2.0", "webpack": "^1.12.13" }, "devDependencies": { "babel-eslint": "^5.0.0", "babel-loader": "^6.2.4", "babel-plugin-react-transform": […]