Tag: webpack dev server

webpack-dev-server监视并正确编译文件，但浏览器无法访问它们: 编辑：链接到Github回购在这个例子是托pipe在这里以防万一有人想运行它我得到了与另一个用户几乎完全相同的问题（你可以在这里find问题），在运行webpack-dev-server实际上编译和正确观察文件（看terminal输出控制台），但浏览器仍然无法正确查看我的网站。这是我的webpack.config.js文件： var webpack = require('webpack'), path = require('path'), // webpack plugins CopyWebpackPlugin = require('copy-webpack-plugin'); var config = { context: path.join(__dirname,'app'), entry: './index.js', output: { path: path.join(__dirname, 'public'), filename: 'bundle.js', publicPath: path.join(__dirname, 'public') }, devServer: { // contentBase: './public/' }, plugins: [ // copies html to public directory new CopyWebpackPlugin([ { from: path.join(__dirname, […]

如何使用Web套接字和angular度CLI来设置代理: 我有一个使用angular度CLI构build的简单的Web应用程序。我希望它使用networking套接字与后端进行通信。我已经编写了后端，并用一个简单的index.html页面进行了testing，服务器可以在套接字上发送和接收数据。在我的angular-cli项目中，我已经设置了一个代理configuration文件来设置代理到后端。 proxy.conf.json { "/sock": { "target": "http://localhost:3000", "changeOrigin": true, "ws": true, "logLevel": "debug" } } 然后使用以下命令启动服务器。 ng serve –proxy-config proxy.conf.json 现在我有一个服务，只是试图打开一个套接字，并发送一个固定的string，我期待看到后台logging。 import { Injectable } from '@angular/core'; import * as io from 'socket.io-client'; @Injectable() export class ChatService { private socket: any; constructor() { this.socket = io({ 'path': '/sock' }); this.socket.emit('chat message', 'Hello […]

React未定义ReferenceError？我正在使用webpack和webpack-dev-server: 这是我的jsx ： var React = require('react'); var ReactDOM = require('react-dom'); ReactDOM.render( <h1>hello world</h1>, document.getElementById('content') ) 我用webpack build/bundle.js ＆我将bundle.js导入index.html index.html的： <!DOCTYPE html> <html> <head> ┊ <meta charset="utf-8"> ┊ <meta name="viewport" content="width=device-width"> ┊ <title></title> </head> <body> ┊ <div id="content"></div> ┊ <script src="./build/bundle.js" type="text/javascript" charset="utf-8"></script> </body> </html> 但是当我运行webpack-dev-server ，chrome控制台错误： bundle.js:57 Uncaught ReferenceError: React is not defined 我相信，我已经运行npm […]

webpack dev服务器混合内容错误: 我使用webpack-dev-server在Cloud9上运行基于React的网站，因此它通过https提供内容。问题是，当我尝试做一些Ajax（networking）请求到外部http链接，它给出了以下错误：混合内容：“https：// …”页面通过HTTPS加载，但请求不安全的XMLHttpRequest端点“http：// …”。此请求已被阻止; 内容必须通过HTTPS提供。是否有任何技巧的webpackconfiguration，使其可能从http请求数据？

stream浪汉文件系统与npm的问题: 我一直遇到Vagrant机器和npm频繁的错误，在那里文件系统突然变成只读。在所有情况下，涉及一个包含git回购的同步目录。这是一个configuration设置，我已经能够遇到问题。这两个文件都位于面向节点的git存储库的根目录下，就像这个一样。 Vagrantfile # Vagrantfile API/syntax version. Don't touch unless you know what you're doing! VAGRANTFILE_API_VERSION = "2" Vagrant.configure(VAGRANTFILE_API_VERSION) do |config| # Use host's SSH keys config.ssh.forward_agent = true # Get current directory name (presumably, repo dirname) repo_dirname = File.basename(Dir.getwd) # Set US locale ENV['LC_ALL']="en_US.UTF-8" # Ensures virtualbox can create symlinks in shared […]

webpack-dev-server错误“未find命令：webpack-dev-server”: 真的不明白为什么我不能让这个运行…我做了以下。 npm install -g webpack webpack-dev-server 证实两者安装成功。现在，当我尝试执行webpack-dev-server ，我得到以下内容： $ webpack-dev-server –inline –hot zsh: command not found: 'webpack-dev-server' 永远不要碰到这个，因为我所有的其他npm模块在本地和全局都可以正常加载/运行。我已经尝试在本地安装到一个项目（添加到package.json，npm安装，yadda yadda ..），并收到相同的错误。我错过了什么吗？

Webpack不会在npm run上生成包文件: 问候一个和所有，在做了一个React应用之后，我决定深入研究Webpack。在整个npm自动化环境中，我是一个新手，在遵循了一本烹饪书和各种教程之后，我不能让npm run dev捆绑我的应用程序。当我运行webpack ，它会生成一个bundle.js，但是当我改变某些东西时，webpack会生成一个物理文件。 Gulp和Grunt可以为我做这个，但是我也想让它和webpack一起工作。所以，没有更多的东西，一些代码。我运行npm run dev ，像这样定义（ package.json ，只是脚本部分*）： "scripts": { "build": "webpack", "dev": "webpack-dev-server –devtool eval –progress –colors –hot –content-base build" } 通过以下Webpackconfiguration： var webpack = require('webpack'); var path = require('path'); module.exports = { entry: path.resolve(__dirname, 'src/js/main.js'), output: { path: path.resolve(__dirname, 'dist'), filename: '/js/bundle.js', publicPath: '/' }, devServer: […]

在Angular2 + Webpack中使用templateUrl的相对path: import {Component} from 'angular2/core'; @Component({ selector: 'app', styleUrls: ['./app.component.less'], templateUrl: './app.component.html' }) export class AppComponent { name:string = 'Demo' } 当使用templateUrl和styleUrls的相对path时，我得到：错误404，找不到文件： zone.js：101 GET http：//localhost/app.component.html 404（Not Found）代码： https ： //github.com/Dreampie/angular2-demo 我觉得这是不好的devise，因为在不同的情况下可能会build立目录不一样，我可以把它改成相对的当前path吗？ raw-loader可以解决这个问题，但是html-loader ， less-loader不能用于template ， styles ，它只能在string工作，所以为什么不把它们支撑起来呢？ import {Component} from 'angular2/core'; @Component({ selector: 'app', styles: [require('./app.component.less')], template: require('./app.component.html') }) export class AppComponent { name:string = […]

webpack-dev-server无法find模块'webpack': 我试图使用webpack-dev-server来运行一个简单的程序，但我得到这个错误： module.js:471 throw err; ^ Error: Cannot find module 'webpack' at Function.Module._resolveFilename (module.js:469:15) at Function.Module._load (module.js:417:25) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object.<anonymous> at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) 我用下面的npm命令安装了webpack npm install –save-dev webpack 我有以下configuration： (webpack.config.js) var webpack = require('webpack'); var path = require('path'); var […]

让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', […]