标签: webpack-dev-server

我在浏览器中收到以下错误:

未捕获的错误:不变违规:style支持期望从样式属性到值的映射,而不是字符串.例如,使用JSX时style = {{marginRight:spacing +'em'}}.

这是在运行webpack-dev-server并转到localhost:8080时.

./modules/main.js:

/** @jsx React.DOM */

var React = require('react');
var HoverAction = require('./HoverAction/HoverAction');

var Application = React.createClass({
  render: function() {
    return (
      <div>
        <HoverAction title="favorite" />
      </div>
    );
  }
});


if (typeof window !== 'undefined') {
  React.render(<Application />, document.getElementById('app'));
}

./modules/HoverAction/HoverActions.js:

/** @jsx React.DOM */
'use strict';

var StyleSheet = require('react-style');
var React = require('react');

var HoverActionStyles = StyleSheet.create({
    normal: {
        height: '200px',
        width: '200px',
        border: '1px solid black'        
    }
});

var …

我是webpack的新手,在尝试设置webpack时遇到的问题很少.

我有以下目录结构:

• 节点模块
• 公共(index.html,index.jsx)
• 组件
• webpack.config.js

在index.html中,我试图包含

<script src="../node_modules/react/dist/react-with-addons.js"></script>

当我试图运行webpack时,dev服务器控制台正在向我展示

http://localhost:8080/node_modules/react/dist/react-with-addons.js not found

以下是我的webpack.config.js文件:

module.exports = {
    //This is the entry point for the webpack
    entry: {
    app: ['./public/index.jsx']
    },
    output: {
    // This is the name of the bundle which is created  when webpack runs
    path: './public',
    filename: 'bundle.js' 
    },
    module: {
        loaders: [
            {
                //tell webpack to use jsx-loader for all *.jsx files
                test: /\.jsx$/,
                loader: 'jsx-loader?insertPragma=React.DOM&harmony'
            }
        ]
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    }
}

我正在尝试运行webpack-dev-server,但是当我去http://localhost:8080/浏览器返回时

No data received 
ERR_EMPTY_RESPONSE

解

我能够通过明确告诉webpack使用端口3000来解决这个问题

webpack-dev-server --port 3000

运行 http://localhost:3000/

我目前正在尝试使用基于express + webpack-middleware的更强大的解决方案来替换使用webpack-dev-server的旧设置.所以我用它来运行它:"webpack-dev-server --content-base public/--history-api-fallback"但现在我想像这样使用它:"node devServer.js".以下是我当前设置的详细信息.

webpack.config.dev.js:

var path = require('path');
var webpack = require('webpack');
var debug = require('debug');

debug.enable('app:*');

var log = debug('app:webpack');

log('Environment set to development mode.');
var NODE_ENV = process.env.NODE_ENV || 'development';
var DEVELOPMENT = NODE_ENV === 'development';

log('Creating webpack configuration with development settings.');
module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'eventsource-polyfill', // necessary for hot reloading with IE
    'webpack-hot-middleware/client',
    './src/index',
    './src/scss/main.scss',
  ],
  output: {
    path: path.join(__dirname, 'public/js'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(), …

我已经在StackOverflow和GitHub问题上经历了很多答案,但是,我仍然陷入了Webpack中的热模块替换.我npm start用来运行我的服务器webpack-dev-server --hot --inline.我正在尝试更改我的React组件中的代码,但浏览器中没有任何反应.

我在Ubuntu 14.04LTS上使用Google Chrome版本49.0.2623.87(64位).

在我的浏览器中console,我收到日志消息

[HMR]等待来自WDS的更新信号......

[WDS]启用热模块更换.

但是,没有热/实时重载正在发生.当我在React组件文件中更改代码时,没有显示任何内容.我正在关注本教程的第一个视频,Egghead.io/ReactFundamentals,其中一切正常.

以下是我的package.json和webpack.config.js文件.

的package.json

{
  "name": "react-fundamentals",
  "version": "1.0.0",
  "description": "Fundamentals of ReactJS",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot --inline"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.0.0-rc.2",
    "react-dom": "^15.0.0-rc.2"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.7.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js

module.exports = {
  context: __dirname,
  entry: "./main.js", …

是否有可能在指定的任意文件集发生变化时重新加载webpack-dev-server？

有点像:

devServer: {
    watchTheseFiles: [ 'path/to/files', 'path/to/more/files' ]
}

更精细的是,我可以指定要查看哪些文件的正则表达式吗？

我这样做是因为一个黑客位的重装,当我触发任意文件的某些变化(他们可能是.txt,.png,无论...)

此时,指定的路径contentBase似乎在文件更改时不会触发重新加载.

我刚刚做出反应并为自己尝试.经过几个小时的配置webpack只是为了在我的屏幕上获得一个问候世界,我想我现在可以开始了,但是在尝试从文件中渲染另一个组件后,下一个问题.

我的主文件是app.js,它呈现了一切:

import React from 'react';
import ReactDOM from 'react-dom';
import {Hello} from './hello';

ReactDOM.render(
   <Hello/>,
   document.getElementById('app')
);

Hello组件来自同一文件夹中的hello.js:

import React from 'react';

class Hello extends React.Component{
   render(){
       return (
           <h1>Hello, world!</h1>
       )
    }
}

export default Hello;

当我在没有导入/导出的app.js中做所有事情时,它呈现得很好.它编译也很好.但是现在控制台中存在很多错误.那我错过了什么？

谢谢

格尔德

谁能指引我朝正确的方向发展？

所以我设置了带有松露套件演示的webpack-dev-server,只是为了获得我的应用程序的基础.所以我的配置文件包括index.html和app.js,但它尝试显示一个console.log输出到app.js没有通过控制台显示？

webpack.config.js

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports =
  {
  entry: './app/javascripts/app.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'app.js',
  },
  plugins: [
    // Copy our app's index.html to the build folder.
    new CopyWebpackPlugin([
      { from: './app/index.html', to: "index.html" }
    ])
  ],
  module: {
    rules: [
      {
       test: /\.css$/,
       use: [ 'style-loader', 'css-loader' ]
      }
    ],
    loaders: [
      { test: /\.json$/, use: 'json-loader' },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015'],
          plugins: ['transform-runtime'] …

我正在使用带有webpack-dev-server的Browser Sync，并且在使用浏览器同步时遇到了问题。只有表格填写有效，单击，滚动在浏览器同步中不起作用，并且没有发生任何编译时错误，但是以上这些都不起作用..！这是我的“ Webpack.dev.js”文件，那么这里有什么问题呢？

const helpers = require('./helpers');
const buildUtils = require('./build-utils');
const webpackMerge = require('webpack-merge'); 
const commonConfig = require('./webpack.common.js');

const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
const EvalSourceMapDevToolPlugin = require('webpack/lib/EvalSourceMapDevToolPlugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = function (options) {
  const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
  const HOST = process.env.HOST || 'localhost';
  const PORT = process.env.PORT || 3000;

  const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, {
    host: HOST,
    port: PORT,
    ENV: ENV,
    HMR: helpers.hasProcessFlag('hot'),
    PUBLIC: process.env.PUBLIC_DEV || HOST + ':' …

我安装了webpack-bundle-analyzer并需要运行它.我该怎么做？我有几个错误.其中最常见的是

Could't analyze webpack bundle