标签: webpack-dev-server

我已经按照webpack上的主要教程进行了操作,并且我已经启动并运行了服务器.当我更改文件时,它会在保存时更新,一切都很好.然而,我然后介绍了React,这一切都出了问题.

首先,我在浏览器中收到此错误:

Unexpected token <
You may need an appropriate loader to handle this file type.

这指向我的entry.js文件中的第4行:

var CommentBox = React.createClass({
  render: function() {
    return (
        <div className="commentBox">
          Hello, world! I am a CommentBox.
        </div>
    );
  }
});
ReactDOM.render(
    <CommentBox />,
    document.getElementById('content')
);

这是index.html

<html>
<head>
    <meta charset="utf-8">
</head>
<body>

    <div id ="content"></div>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

webpack.config.js:

module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: …

我正在尝试在react / typescript（使用TSX）环境中设置热模块重新加载。我已经使用了react / redux现实世界中的示例作为推动事情发展的模型，这是我到目前为止的工作：

server.js

var webpack = require('webpack')
var webpackDevMiddleware = require('webpack-dev-middleware')
var webpackHotMiddleware = require('webpack-hot-middleware')
var config = require('./webpack.config')

var app = new (require('express'))()
var port = 3000

var compiler = webpack(config)
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }))
app.use(webpackHotMiddleware(compiler))

app.use(function(req, res) {
  res.sendFile(__dirname + '/index.html')
})

app.listen(port, function(error) {
  if (error) {
    console.error(error)
  } else {
    console.info("==>   Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port)
  }
})

webpack.config.js …

Webpack的新功能。

使用Webpack，我可以创建服务器。同时我还可以使用express创建服务器。那么两者之间以及何时使用webpack-dev-server和express服务器之间有什么区别？

加载后，一切正常，hmr工作正常。然后出现此错误。

GET http://localhost:3000/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING

就像webpackdevserver有点崩溃然后重新启动，需要几秒钟，然后hmr才能再次工作

[HMR] connected

然后是“崩溃”，依此类推...

看来我仅在Chrome（版本55）中有此问题（已通过mozilla测试，并且未出现此问题）。

我可能错过了webpack或node conf中的某些内容，但是找不到文档中的某些内容。

任何想法如何解决这个问题？

//在webpack conf下面

const path = require('path');
const merge = require('webpack-merge');
const TARGET = process.env.NODE_ENV;
process.env.BABEL_ENV = TARGET;
const webpack = require('webpack');
const NpmInstallPlugin = require('npm-install-webpack-plugin');

const PATHS =  {
    app: path.join(__dirname, 'client'),
    build: path.join(__dirname, 'build')
};

const common = {
    entry: {
        app: [PATHS.app, 'webpack-hot-middleware/client']
    },

    resolve: {
        extensions: ['', '.js', '.jsx']
    },

    output: {
        path: PATHS.build,
        filename: 'bundle.js',
        publicPath: '/'
    },
    module: {
        loaders: [
            {
                test: …

我正在使用多个软件包,我们称之为WebApp和Utility.WebApp依赖于Utility,它通过"npm link"在本地生活.我正在使用webpack-dev-server在开发期间在浏览器中运行WebApp.我想修改Utility包中的文件并在页面刷新后看到它们反映出来,但webpack-dev-server不会看外部文件 - 我必须杀死并重新启动webpack-dev-server才能看到它们.

webpack-dev-server是否可以监视外部文件并为我重新加载？我无法在这样的功能上找到任何文档.

我在webpack 1.13.3和webpack-dev-server 1.16.2上.不使用热模块重新加载,整页刷新就足够了.谢谢!

要求

我需要运行webpack-dev-server并等待，直到服务器准备好提供页面为止。

解

// Start a webpack-dev-server
new WebpackDevServer(webpack(myConfig), {
    publicPath: myConfig.output.publicPath,
    hot: true,
    historyApiFallback: true,
    // It suppress error shown in console, so it has to be set to false.
    quiet: false,
    // It suppress everything except error, so it has to be set to false as well
    // to see success build.
    noInfo: false,
    stats: {
        // Config for minimal console.log mess.
        assets: false,
        colors: true,
        version: false,
        hash: false,
        timings: false,
        chunks: false,
        chunkModules: false
    }
}).listen(3000, …

我遇到了一个发现其他人也遇到过的问题。我遇到的唯一问题是，我发现的所有解决方案似乎都不适合我。当我构建项目时，一切都会成功而没有错误。然后webpack-dev-server，我在dist文件夹中开始构建的项目。当我打开浏览器时，出现以下错误：

现在webpack-dev-server在开发模式下运行时不会发生这种情况。简单的解释是因为我没有在webpack.config.dev.js文件中执行任何代码拆分。所以我知道问题出在我的电脑上CommonsChunkPlugin。我无法确切说明原因。这是我正在处理的仓库的链接： Nappstir / react-landing-page。这个项目没有什么复杂的。我只是尝试为将要内置的基本目标网页构建模板React，因此没有Redux接线。关于什么可能导致此错误的任何想法？

您可以克隆此项目，然后简单地运行npm install并npm run build构建该项目。然后只需访问' http：// localhost：3000 / `

我正在使用Angular-Cli，并且已经使用ncu工具更新了所有package.json。现在当我执行npm启动时（webpack-dev-server --port 4200 --config config / webpack.dev.js --open --progress --profile --watch --content-base src /），webpack挂起在

webpack：等到捆绑包完成：/

是否可以隔离引起问题的包装？我尝试使用display-error-details标志，但表示无法识别。我认为即使设置了它也不会有所帮助。没有引发任何错误，只是要求您无限期地等待。

{
"name": "angular2-webpack-starter",
"version": "5.4.1",
"description": "An Angular 2 Webpack Starter kit featuring Angular 2 (Router, Http, Forms, Services, Tests, E2E, Coverage), Karma, Protractor, Jasmine, Istanbul, TypeScript, and Webpack by AngularClass",
"keywords": [
    "angular2",
    "webpack",
    "typescript"
],
"author": "Patrick Stapleton <patrick@angularclass.com>",
"homepage": "https://github.com/angularclass/angular2-webpack-starter",
"license": "MIT",
"scripts": {
    "build:aot:prod": "npm run clean:dist && npm run clean:aot && webpack --config config/webpack.prod.js  --progress --profile --bail",
    "build:aot": "npm …

使用webpack dev服务器,我希望有一个代理服务器代理服务器,除了我的应用程序.除了在我的应用程序下有一个端点的api应该被代理:

• /myapp/api/** 应该代理
• /myapp/** 不应该被代理(任何
• /** 应该代理

以下设置使用旁路功能执行此操作,但是可以使用单个上下文规范以声明方式完成吗？

/myapp/api/**

是的,这是令人费解的.抱歉.

不知道为什么两天前我的项目（通过vue create创建）停止工作-在Chrome浏览器中

无效的主机头

和

WDS断开连接

错误。在cmd中，一切都可以正确编译（npm run serve），我不知道webpack，所以我不知道如何解决它。

我已经做了什么：

• 重新安装的节点
• 删除并重新安装了所有npm软件包