我在设置开发工作流程时遇到问题,该工作流程将同时执行以下两个任务:
最好的做法是让webpack-dev-server服务于静态资产,并且有一个单独的Web服务器在不同的端口上提供API吗？如果是这样,javascript中的API调用将需要指定主机和端口,并且需要在进入生产之前进行更改.似乎所有在线教程都关注#1,并且没有设置API服务器.谁能指出我正确的方向？
我并不反对使用gulp和browserify或SystemJS而不是webpack,但似乎如果我想使用react-hot-loader,我需要使用webpack.
我试图用react-hot-loader同webpack-dev-server和react-router,但是当我尝试访问本地主机:3000 /我得到:
Cannot GET /
当然,它在我尝试访问localhost:8000 /时有效.我试图遵循反应热模板,没有成功.
这是我的代码:
server.js
const http = require('http');
const express = require('express');
const consolidate = require('consolidate');
const bodyParser = require('body-parser');
const routes = require('./routes');
const app = express();
app.set('views', 'public/pages'); // Set the folder-name from where you serve the html page.
app.set('view engine', 'html');
app.engine('html', consolidate.handlebars);
app.use(express.static('public')); // Set the folder from where you serve all static files
app.use(express.static('public/dist')); // Set the folder from where you serve …Webpack dev服务器由于未知原因而自举两次.(请注意,只有dev-server有这个问题,如果我捆绑文件,一切运行正常).
我看到这行执行了两次:
// Load entry module and return exports
return hotCreateRequire(790)(__webpack_require__.s = 790);
我也可以在浏览器日志中看到这一行:
[HMR] Waiting for update signal from WDS...
这些是使用过的版本
"webpack": "^2.1.0-beta.21"
"webpack-dev-server": "^2.1.0-beta.4",
我今天刚刚升级到Webpack 2.2并且已经阅读了他们的指南,这些指南似乎仍在进行中.
我在设置我的应用程序以使用webpack-dev-server和热模块重新加载时遇到了困难.
我通过webpack文档关注的指南在这里,但我不得不修改它以使用开发/生产应用程序.
https://webpack.js.org/guides/hmr-react/
我得到的两个错误如下......
Uncaught Error: _registerComponent(...): Target container is not a DOM element.
at invariant (eval at <anonymous> (index.js:2), <anonymous>:44:15)
at Object._renderNewRootComponent (eval at <anonymous> (index.js:64), <anonymous>:311:44)
at Object._renderSubtreeIntoContainer (eval at <anonymous> (index.js:64), <anonymous>:401:32)
at render (eval at <anonymous> (index.js:64), <anonymous>:422:23)
at hotRenderer (eval at <anonymous> (index.js:73), <anonymous>:41:28)
at eval (eval at <anonymous> (index.js:73), <anonymous>:47:5)
at eval (eval at <anonymous> (index.js:73), <anonymous>:54:5)
at Object.<anonymous> (index.js:73)
at e (index.js:1)
at Object.<anonymous> (index.js:146)
和
Warning: React.createElement: type is invalid …我在实现一些简单的操作时遇到了困难:我有一个index.html文件由http:// localhost:3200在ruby on rails上提供,它使用http:// localhost:8000在webpack-dev-server 上提供的javascript文件.
所以这就是我所拥有的:
<!doctype html>
<head>
<script crossorigin="anonymous" src="http://localhost:8000/app.js" />
</head>
<!-- ... -->
</html>
我的app.js文件与以下标题一起发送:
Access-Control-Allow-Origin: *
我想要的是能够window.onerror在app.js中覆盖,并查看捕获的错误,而不是"脚本错误".
我错过了什么？
- 编辑 - 因为它可能不够清楚:我的脚本确实加载.对于那件事我没有任何疑问.我的问题是我需要报告发生在其他地方的错误,但我不能这样做,因为app.js中发生的任何错误都报告为"脚本错误"而不是更明确的错误.
快问问题的家伙,我正在尝试使用带有socketio的webpack-dev-server,但在尝试不同的事情之后,我认为两个客户端都在监听同一个端口'3000',我最终遇到了某种握手错误如果我不在同一个端口上使用webpack-dev-server那么这里是我的服务器配置
const PORT = process.env.PORT || 3000;
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true,
setup(app) {
const server = require('http').Server(app);
let onlineUsers = 0;
const io = require('socket.io')(server);
io.on('connection', (socket) => {
console.log(`A client is connected:${socket.id}`);
onlineUsers++;
io.sockets.emit('onlineUsers', {
onlineUsers
});
});
server.listen(3000, () => {
console.log('listening on *:3000');
});
}
}).listen(PORT, 'localhost', (err) => {
if (err) {
console.log(err);
}
console.log(`Listening at localhost: ${PORT}`);
});
和webpack配置
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'react-hot-loader/patch',
'./src/app.js'
],
这些都是错误
WebSocket connection to …当我运行$ npm run dev("dev": "webpack-dev-server")它打开localhost:8080/undefined而不是localhost:8080或至少localhost:8080/index.html
webpack-config.js devServer部分:
devServer:{
contentBase: path.join(__dirname, 'dist'),
compress: true,
stats: "errors-only",
hot: true,
open: true
如果我删除URL的/ undefined部分,即使更换热模块也能正常工作,所以这不是一个大问题; 只是想知道为什么会这样.
编辑:我在MacOS上
Edit2:控制台信息时npm run dev:
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from /Users/cozarkd/folders/dist
webpack: wait until bundle finished: /undefined
webpack: Compiled successfully.
泰
我使用webpack模板设置了https://github.com/vuejs/vue-cli Vue CLI,它运行正常.但是当我在模板文件中更改某些内容时,它会抛出错误.
请帮助解决以下问题,
> Starting dev server...
DONE Compiled successfully in 2703ms 6:00:35 PM
> Listening at http://localhost:8083
WAIT Compiling... 6:01:05 PM
c:\xampp\htdocs\myproject\node_modules\enhanced-resolve\lib\CachedInputFileSy
stem.js:145
if(key.startsWith(what))
^
TypeError: Cannot read property 'startsWith' of undefined
at Storage.purge (c:\xampp\htdocs\myproject\node_modules\enhanced-resolve
\lib\CachedInputFileSystem.js:145:10)
at Storage.purge (c:\xampp\htdocs\myproject\node_modules\enhanced-resolve
\lib\CachedInputFileSystem.js:150:9)
at CachedInputFileSystem.purge (c:\xampp\htdocs\myproject\node_modules\en
hanced-resolve\lib\CachedInputFileSystem.js:259:20)
at EventEmitter.watcher.once (c:\xampp\htdocs\myproject\node_modules\webp
ack\lib\node\NodeWatchFileSystem.js:42:26)
at EventEmitter.g (events.js:291:16)
at emitTwo (events.js:106:13)
at EventEmitter.emit (events.js:191:7)
at EventEmitter._onTimeout (c:\xampp\htdocs\myproject\node_modules\watchp
ack\lib\watchpack.js:142:7)
at ontimeout (timers.js:380:14)
at tryOnTimeout (timers.js:244:5)
at Timer.listOnTimeout (timers.js:214:5)
npm ERR! Windows_NT 6.1.7601
npm …我正在尝试为Angular-Cli项目获取正确的设置,以便源映射在Microsoft Edge中工作.Angular-Cli v1.6.6 webpack v3.10.0
从配置中启用源地图支持,它可以在Chrome中使用,但不能在Edge中使用.在Edge中我看到如下错误:
找不到webpack:///(webpack)-dev-server/client？源地图中指定的32cc
我看到"eval code(xxx)"只链接.
从我可以google"webpack:///"不支持Edge但我无法更改Angular-Cli设置以将其更改为其他内容(或者我不明白如何).
只是执行"ng弹出"使源映射从无法工作到半工作(如何正确映射到生成的捆绑的js文件,但不是像Chrome中的非捆绑的js文件)但我仍然看到"找不到webpack:/ //"就像Edge中的消息一样.
我已经尝试编辑webpack.config.js文件来更改"devtool"设置和/或"SourceMapDevToolPlugin"参数设置.
我的测试都没有奏效.
我正在使用handlebars-loader：
{
test: /\.hbs$/,
loader: 'handlebars-loader',
}
我也在使用html-webpack-plugin。
使用Webpack Dev Server，一切都能按我的意愿进行：
如果保存了对车把模板或SCSS文件的更改，则会自动重新加载页面。
但是，一旦我能hot: true下devServer，HMR开始对SCSS变化工作（即CSS地没有全部重新加载更新），这是我想要的，但如果我改变车把模板，HMR不工作，和常规的“热重载”（即重新加载整个页面）也停止工作。
有任何想法吗？
如果HMR适用于SCSS更改，并且对把手模板进行常规的“热重载”（没有，该方法已经可以使用hot: true），那也很好。
javascript handlebars.js webpack webpack-dev-server webpack-hmr
webpack ×5
javascript ×2
react-router ×2
reactjs ×2
webpack-hmr ×2
angular-cli ×1
cors ×1
express ×1
npm ×1
redux ×1
socket.io ×1
vue-cli ×1
webpack-2 ×1