Tag: webpack dev server

ReactJS服务器端重新加载（webpack-dev-server）: 我正在尝试使用ReactJS构build我的第一个服务器端渲染。我从这个Redux教程基于我的代码运行npm start （ webpack && node server.js ）时，应用程序运行正常。我想用热重装来在dev环境下做一个应用程序的快速debugging。所以我在npmconfiguration（ webpack-dev-server –inline –hot ）上添加了start选项。请注意，我没有index.html文件，因为react-router正在select正确的JSX文件加载。 npm开始打开我的公共文件夹和显示文件，但没有启动我的应用程序。通常我会点击一个index.html文件，但我没有。我不明白是怎么回事，也不知道如何解决。帮助赞赏。的package.json： "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack –config webpack.config.prod.js -p", "start": "webpack-dev-server –inline –hot", "dev": "webpack && node server.js" }, webpack.config.js： module.exports = { entry: './client.js', output: […]

Webpack-dev-server和isomorphic react-node应用程序: 我设法正确使用webpack开发服务器和一个节点服务器（express），使用webpackconfiguration中的插件部分。这一切工作正常，但现在我试图去同构，并在快速应用程序内使用客户端组件。到目前为止唯一的问题，我遇到的是，没有webpack“parsing”我的服务器端代码，我得到的情况下，我需要的组件，但path没有解决 IE 在组件内部 'use strict'; import React from 'react'; import { RouteHandler, Link } from 'react-router'; import Header from 'components/header/main'; // <– This line causes the error because webpack is not working when parsing this JSX server-side export default React.createClass({ displayName: 'App', render() { return ( // … More code 我应该以另一种方式configurationwebpack，还是必须将所有导入更改为有效的服务器端？代码是这里万一你想看到实际的状态https://github.com/vshjxyz/es6-react-flux-node-quickstart

npm无法通过networking: 我有一个npm的麻烦，当我连接在我的networking，它很好地工作，但后来我断开计算机，它停止工作。当我运行任何与npm相关的命令时，它会给我这个错误失败。有没有人知道那里发生了什么？我有Capitan OS的Mackbook pro webpack-dev-server –config ./webpack/webpack.config.js –content-base ./app/ –watch –hot –inline –progress 70% 4/4 build modulesevents.js:141 throw er; // Unhandled 'error' event ^ Error: getaddrinfo ENOTFOUND localhost at errnoException (dns.js:26:10) at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:77:26) npm ERR! Darwin 15.0.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev" npm ERR! node v4.2.1 npm ERR! […]

无法使用webpack dev服务器中间件加载图像: 所以我花了24小时来调整我的代码，试图让这个工作和searchSO和谷歌，但没有运气 – 也许有人可以帮助！我的React应用程序在Express上运行，但是使用webpack-dev-server中间件。当我加载页面时，图像是空白的，就好像它们不存在一样。我没有得到任何错误信息在我的控制台（例如没有404错误），但图像元素只是显示alt文本，并没有显示实际应该在那里的png或svg 。顺便说一句，这不仅仅是反应组件不能渲染图像 – 我试图将一个图像文件硬编码到我的index.html文件中作为测试，这产生了相同的结果。这是我的代码： server.js（截断以排除数据库设置和额外的快速路由） const express = require('express'); const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware'); const webpackHotMiddleware = require('webpack-hot-middleware'); const path = require('path'); const mongoose = require('mongoose'); const config = require('./webpack.dev.config'); // SERVER SETUP const app = express(); const router = express.Router(); var publicPath = path.resolve(__dirname, […]

多（webpack）-dev-server / client中的错误: 我是新来的webpack / reactjs，只需按照教程在这里： https ://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm 然后，我'npm开始'后，我得到错误： ERROR in multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./main.js Module not found: Error: Can't resolve 'babel' in '/var/www/jay/reactjs/react-app' BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders. You need to specify 'babel-loader' instead of 'babel'. @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./main.js 有任何想法吗？

节点构build命令不起作用: 我在package.json文件中使用这个configuration来运行webpack dev服务器。我也想使用一个构build命令，但它不适合我 { "name": "Demo", "version": "1.0.0", "description": "Demo App", "main": "index.js", "scripts": { "start": "webpack-dev-server –hot", "build": "webpack –watch" }, npm start命令工作正常，但build立不是

使用webpack-dev-server的局域网访问节点服务器: 我使用Express，React和Webpack构build了一个应用程序。我使用了webpack-dev-server和react-hot-loader来实现生活。 Express服务器位于端口3000上，webpack-dev-server服务器文件位于localhost:8080 。现在我想访问局域网中另一个客户端的应用程序。我可以访问development machine IP:3000 ，但不能访问localhost:8080 我的webpack.config.dev.js文件是： var webpack = require('webpack'); module.exports = { devtool: 'inline-source-map', entry: [ 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server', './src/client/entry', ], output: { path: __dirname + '/public/js', filename: 'app.js', publicPath: 'http://localhost:8080/public/js', }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), new webpack.DefinePlugin({ "process.env": { BROWSER: JSON.stringify(true) } }) ], resolve: { extensions: ['', […]

如何将外部可访问的文件夹添加到webpack dev服务器: 我开始使用webpack（vue-cli webpack安装），在我的项目中我有2个文件夹（pdfview和imgview）。我的webpackconfiguration是vue-cli模板的默认configuration，我还没有修改（只是为sass和字体添加了一些加载器）。这两个文件夹是文档查看器（一个用于PDF，另一个用于图像文件），它们以这种方式工作： [domain] /pdfview/viewer.html?file= [文件path] 当我运行“npm运行开发”时，webpack开发服务器启动为http：// localhost：8080 ，但它在内存中，我的应用程序有一个iframe试图加载观众。如何将这个文件夹path公开到webpack开发服务器，以便在“localhost：8080 / pdfview / viewer.html？file = [文件path]”中访问它们？我还没有发现任何内容，如果有人有文章，或知道我还没有看到文档的一些部分，请让我知道。提前致谢。 PS：两个观众有相同的文件夹结构：viewer.js，viewer.html和viewer.css。其他PS：对不起，我的英语不好…

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等值？

Webpack /如何在开发模式下捆绑JS文件？: 基本上，默认情况下，webpack的要点是将每个parsing的JS文件捆绑到一个bundle.js 。在开发模式下，我想分别访问每个JS。我不希望他们被捆绑在一个文件中。有没有办法阻止bundle.js在dev模式下将文件连接到bundle.js ？我希望看到A.js ， B.js ， C.js当我在开发模式下打开页面的源代码，而不是收集它们的bundle.js 。