Tag: webpack dev server
Hexo（以及其他静态站点生成器）前端依赖性pipe理工作stream程
是否有推荐的工作stream程来pipe理前端依赖项？ 我一直在阅读很多文章，推荐离开Bower，然后到像Webpack这样的npm-only解决scheme，但是webpack是一个全新的范例（通过一个js文件加载js，scss，字体等），默认情况下，要求js在浏览器中运行，以便加载css。 我想要一个静态网站的部分原因是，对于最终用户，js不是强制性的。 然而，我真的厌倦了bower-installing的东西，然后不得不托pipe一切在bower_components中，针对特定的文件名（js，css，img）包含在输出中，或者将他们的css / img依赖关系转移到我自己的repo中。 更不用说，依靠两个登记处是不太理想的。 Hexo是否有推荐的方法，或者有没有人有如何做到这一点的意见？ 在webpack-dev-server的独立terminal中运行一个Hexo服务器似乎很痛苦和尴尬，并且可能会造成一些混淆，因为哪个库应该处理哪些文件。 其他工具更适合静态站点生成器的开发/构build过程中的依赖关系pipe理吗？
如何使Webpack和Node一起工作？
我打算在前端使用ES6模块，所以我在Webpack上进行了实验。 但是，我正在努力工作 客户端发生变化时重新加载热插拔 在服务器端发生变化时重新加载（在使用nodemon .之前，我正在使用nodemon .并且没有问题） 在terminal上丢失debug / console.log信息，因为它正在打印webpack状态，而在服务器上没有任何东西，比如我的自定义“服务器正在运行….”日志。 下面的设置我试图通过npm start运行。 每次我做任何改变，我都必须再次运行npm start 的package.json { "name": "socket-io-chat", "version": "1.0.0", "description": "", "main": "server.js", "scripts": { "start": "npm run build", "build": "webpack -d && webpack-dev-server –hot –inline –watch && node –watch", "build:prod": "webpack -p && webpack-dev-server" }, "author": "", "license": "ISC", "dependencies": { "cors": "^2.7.1", "express": […]
使用react-hot-loader 3与自己的服务器
我能够设置react-hot-loader来正确地绑定我的客户端js，并将更改推送到浏览器并在那里应用（除了[react-router] You cannot change <Router routes>; it will be ignored警告）。 我使用自己的服务器与koa ， koa-webpack-dev-middleware和koa-webpack-hot-middleware ，处理webpack和hot。 它也处理我的应用程序与此代码的服务器呈现 export default function *renderReact() { const history = createMemoryHistory(); const store = makeStore(history); const [redirectLocation, renderProps] = yield match.bind(null, { routes, location: this.url, history }); if (redirectLocation) { return this.redirect(redirectLocation.pathname + redirectLocation.search) } if (renderProps == null) { return this.throw(404, […]
Webpack多页面应用程序服务
我有一个反应项目，但我分成两部分（pipe理员，前）。 我想通过一个webpack devserver服务这两个不同的端口。 当我运行“npm run start”时，可能会有两个部分在不同的端口工作 我用webpackbuild立，输出在dist目录里 admin.html 的index.html admin.js index.js common.js 如果我打开本地主机：8081 – >必须返回index.html（包括index.js和common.js） 如果我打开本地主机：8082 – >必须返回admin.html（包括admin.js，common.js） webpackconfiguration： entry: options.production ? { interview: ["./app/src/pages/interview/main.js"], admin: ["./app/src/pages/dashboard/main.js"] } : { interview: [ 'webpack-dev-server/client?http://' + options.ip + ':8081', "./app/src/pages/interview/main.js", 'webpack/hot/only-dev-server'], admin: ['webpack-dev-server/client?http://' + options.ip + ':8082', 'webpack/hot/only-dev-server', "./app/src/pages/dashboard/main.js"] }, output: { path: options.production ? './dist' : […]
webpack dev server：TypeError：标题内容包含无效字符
我有一个webpack应用程序，我正在开发模式下使用webpack开发服务器来运行应用程序。 我也使用代理将我的请求代理到现场环境。 该应用程序以前运行使用节点v4.3.2没有问题，应用程序运行正常，代理正确。 我今天升级节点到版本7.0.0，所以我可以增加对es6的支持。 现在运行应用程序时，我收到了以下所有请求的错误： webpack: bundle is now VALID. _http_outgoing.js:360 throw new TypeError('The header content contains invalid characters'); ^ TypeError: The header content contains invalid characters at ServerResponse.setHeader (_http_outgoing.js:360:11) at /home/jason/dev/frontend-tsm-holiday-results/node_modules/http- proxy/lib/http-proxy/passes/web-outgoing.js:96:13 at Array.forEach (native) at Array.writeHeaders (/home/jason/dev/frontend-tsm-holiday-results/node_modules/http-proxy/lib/http-proxy/passes/web-outgoing.js:90:35) at ClientRequest.<anonymous> (/home/jason/dev/frontend-tsm-holiday-results/node_modules/http-proxy/lib/http-proxy/passes/web-incoming.js:157:20) at emitOne (events.js:96:13) at ClientRequest.emit (events.js:188:7) at HTTPParser.parserOnIncomingClient [as onIncoming] (_http_client.js:473:21) at HTTPParser.parserOnHeadersComplete […]
我如何将我的静态资产包含在webpack中，并在angular2应用程序中使用它们？
我有我的应用程序的生产和开发环境单独的文件，我的开发环境工作正常，我没有得到如何使用我的静态资产在webpack中，并在应用程序中使用它们，他们被直接访问我的HTML和CSS文件如下所示 authentication.component.html <img src="/assets/images/myimage.png" /> authentication.component.css @font-face { font-family: "untitled-font-5"; src:url("/assets/fonts/untitled-font-5.eot"); src:url("/assets/fonts/untitled-font-5.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/untitled-font-5.woff") format("woff"), url("/assets/fonts/untitled-font-5.ttf") format("truetype"), url("/assets/fonts/untitled-font-5.svg#untitled-font-5") format("svg"); font-weight: normal; font-style: normal; } 这是我的项目的目录结构 和我的webpackconfiguration文件 共同 var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var helpers = require('./helpers'); module.exports = { entry: { 'vendor': './src/vendor.ts', 'app': './src/app/main.ts' }, resolve: { […]
无法摆脱webpack-dev-server状态栏
构build和使用webpack-dev-server提供的本地主机URL时，我无法删除页面顶部的“App ready”状态栏。 以下是我find的以下步骤以及我采取的步骤： 注意到webpack-dev-server GitHub页面指出Webpack和NodeJS版本7有一些问题。 从我的机器上卸载7.2.0并安装了6.9.1 使用npm全局卸载并重新安装Webpack和Webpack-dev-server。 从我的Webpack项目中删除并重新创build了bundle.js文件。 执行硬刷新，然后清除所有的cookie。 首先使用Edge，然后尝试Chrome。 在所有这些testing和重新configuration中，我正在使用–inline参数来运行服务器。 我错过了什么？
WebSocket连接失败。 在WebSocket握手期间错误 – socketjs
细节： 我一直在试图将我的反应项目configuration为使用hot loader以便我可以在不必重新启动服务器的情况下进行积极的开发。 每当websocket尝试连接时，我都会收到一个连续的错误消息： WebSocket connection to 'ws://192.168.33.10/sockjs-node/301/eo4p2zps/websocket' failed: Error during WebSocket handshake: Unexpected response code: 404 。 我的直觉告诉我，这可能与我运行Ubuntu -v 14.04.3 VM（stream浪者） 14.04.3 。 除了上面logging的错误，我得到： http://192.168.33.10/sockjs-node/629/s0dz3nxv/xhr_streaming?t=1482558136743 404 (Not Found) http://192.168.33.10/sockjs-node/629/jbjciaga/eventsource 404 (Not Found) http://192.168.33.10/sockjs-node/iframe.html 404 (Not Found) http://192.168.33.10/sockjs-node/629/e1x0l01e/xhr?t=1482558137388 404 (Not Found) Warning: [react-router] Location "/sockjs-node/629/dr44jysd/htmlfile?c=_jp.ajy5ad3" did not match any routes client?e2df:41 [WDS] Disconnected! Uncaught SyntaxError: […]
如何使用React + Webpack应用程序存储和访问我的API密钥？
我目前正在与前端的React，Babel和Webpackbuild立一个项目。 我需要存储和访问我的API密钥，但我不知道在哪里。 我想我应该将我的API密钥存储在我的.gitignore中的.env文件中。 但是，它正在访问他们，欺骗我。 从我读过的东西看来，webpack可以访问yuor .env文件中的环境variables。 但是，如果我这样做，是不是说当我提出要求我的API密钥将通过浏览器 – 所以密钥将不受保护？ 在过去，我使用了一个节点快递后端服务器，以便我的API密钥受到保护，并且与浏览器无关。 但是我不确定当我有一个webpack dev服务器时是否需要这个。 我开始build立一个expression后端服务器的节点，但是不知道如何将这个绑定到我的webpack.config或package.json中。 Webpack已经是一个节点快递服务器！ 那么我有2个服务器？ 有第二台服务器保护我的API密钥的唯一原因？ 我真的很困惑自己，我觉得不必要的复杂的事情。 任何帮助将非常感激。
错误R14（超过内存配额）heroku节点
我在Heroku上部署了我的应用程序，并使用Webpack-dev-server运行。 这工作正常。 但它开始显示应用程序错误。查看日志后，显示此错误： 错误R14（超出内存配额） 我能够find问题，这是由于节点V8 gc的默认限制，它也提供了解决scheme， web：node –optimize_for_size –max_old_space_size = 460 –gc_interval = 100 server.js 这里是链接，我发现上面的解决scheme： https://blog.heroku.com/node-habits-2016#7-avoid-garbage 它使用节点给解决scheme。但是我使用的Webpack-dev-server不需要创buildserver.js文件来运行应用程序，并直接构build和运行应用程序。 任何人都可以请给出如何解决这个问题与webpack-dev-server的方式。 提前致谢。
