Articles of webpack hmr

Gulp – 改进捆绑的js文件的gulp.watch的性能

当我对js文件进行更改时,我遇到了浏览器livereloading的性能问题。 在我的咕噜设置,我有以下手表: gulp.task('watch', function() { gulp.watch(config.paths.html, ['html']); gulp.watch(config.paths.js, ['js', 'lint']); gulp.watch(config.paths.css, ['css']); }); 因此,每当js文件发生变化时,就会触发js和lint任务。 他们如下: gulp.task('js', function() { browserify(config.paths.mainJs) .transform(reactify) .bundle() .on('error', console.error.bind(console)) .pipe(source('bundle.js')) .pipe(gulp.dest(config.paths.dest + '/scripts')) .pipe(connect.reload()); }); gulp.task('lint', function() { return gulp.src(config.paths.js) .pipe(lint({config: 'eslint.config.json'})) .pipe(lint.format()); }); 有了这个设置, js文件更改的实时重新加载不会扩展。 随着项目越来越大,实时重新加载需要更长的时间。 即使是一个有大约十几个JS文件的小项目,每次重新载入也需要3.8秒。 我知道问题在于,在每个js文件更改时,都会重新激活和捆绑项目中的每个js文件,这是一项昂贵的操作,对于除了您更改的js文件以外的所有js文件都是完全冗余的。 什么是更好的方式来处理实时重新加载? 我知道webpack使用热模块重新加载,有没有这样的gulp等值?

热模块重新加载是使初始页面请求10-20s,与Webpack,Koa,Vue.js

出于某种原因,大多数页面刷新重新请求bundle.js文件,它需要大约10-15-20秒从本地主机下载。 这一切都来自localhost,bundle.js文件大小约为1mb。 这个文件的请求似乎只是爬行,一次加载几千字节。 一些观察: 经过一番挖掘,似乎在从__webpack_hmr到服务器的初始调用中停顿,但是我不确定在调用bundle.js之后发生了这个调用。 以下是服务器请求stream的日志。 在只有一个或两个组件的页面上, 除了主页以外的任何东西。 这暗示着它可能与热模块重装有关。 与其他页面一样,首页仍然会花费5秒以上(有时10-20),但如果使用Ctrl + R刷新页面,则会立即返回。 如果我进行地址栏刷新,则需要更长的时间。 其他页面仍然需要一样长的时间,无论我按Ctrl + R或做一个地址栏重新加载… 更新 :我删除了热门的模块replace,而且它似乎是问题的来源,因为没有它的网页加载即时。 请求日志: – 响应时间GET / = 609ms – > GET / 200 647ms 2.55kb < – GET /main.aafc9fb7f6a0c7f127edb04734d29547.css – > GET /main.aafc9fb7f6a0c7f127edb04734d29547.css 200 17ms 3.43kb < – /bundle.js – > GET /bundle.js 200 18ms 1.29mb < – GET […]

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": […]