标签: webpack-dev-server

我是整个nodejs/reactjs世界的新手,所以如果我的qs听起来很傻就道歉.所以我在这里玩这个reactjs应用程序:https://github.com/bebraw/reactabular

每当我执行"npm start"时,它总是运行在localhost:8080上

如何将其更改为在0.0.0.0:8080上运行以使其可公开访问？我一直在尝试阅读上面的repo中的源代码,但未能找到执行此设置的文件.

另外要添加 - 如果可能的话,如何使它在端口80上运行？

谢谢.

我使用的是一个环境,一个Cloud9.io ubuntu VM Online IDE,我通过对此错误进行故障排除,只是通过Webpack dev服务器运行应用程序.

我推出它:

webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT

$ IP是一个变量,其主机地址为$ PORT,具有端口号.

在Cloud 9中部署应用程序时,我被指示使用这些变量,因为它们具有默认的IP和PORT信息.

服务器启动并编译代码,没问题,但它没有向我显示索引文件.只有一个带有"无效主机标题"的空白屏幕作为文本.

这是请求:

GET / HTTP/1.1
Host: store-client-nestroia1.c9users.io
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36
Accept: 
text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
DNT: 1
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8

这是我的package.json:

{
  "name": "workspace",
  "version": "0.0.0",
  "scripts": {
    "dev": "webpack -d --watch",
    "server": "webpack-dev-server -d --watch --history-api-fallback --host $IP …

正如我写这样的webpack.config.js

module.exports = {
  entry: './index.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  }
};

在index.jsx我导入一个react模块App

import React from 'react';
import { render } from 'react-dom';

import App from './containers/App';

let rootElement = document.getElementById('box')
render(
  <App />,
  rootElement
)

我发现如果我将模块app命名为App.jsx,那么webpack会说index.jsx无法找到模块App,但是如果我命名为命名模块app App.js,它会找到这个模块并且运行良好.

所以,我对此感到困惑.在我webpack.config.js,我已经写test: /\.jsx?$/了检查文件,但为什么命名*.jsx无法找到？

我是webpack的新手,我发现在生产版本中我们可以减少整体代码的大小.目前webpack构建大约8MB文件,main.js大约5MB.如何减少生产构建中的代码大小？我从互联网上找到了一个示例webpack配置文件,我为我的应用程序配置,然后运行npm run build并开始构建,并在./dist/目录中生成一些文件.

1. 这些文件仍然很重(与开发版相同)
2. 如何使用这些文件？目前我正在使用webpack-dev-server来运行该应用程序.

package.json文件

{
  "name": "MyAPP",
  "version": "0.1.0",
  "description": "",
  "main": "src/server/server.js",
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [
  ],
  "author": "Iam",
  "license": "MIT",
  "homepage": "http://example.com",
  "scripts": {
    "test": "",
    "start": "babel-node src/server/bin/server",
    "build": "rimraf dist && NODE_ENV=production webpack --config ./webpack.production.config.js --progress --profile --colors"
  },
  "dependencies": {
    "scripts" : "", ...
  },
  "devDependencies": {
    "scripts" : "", ...
  }
}

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin …

我开始使用开发服务器端渲染应用程序webpack的node/express环境.我对devpack和prod(运行时)环境中每个webpack包的作用感到非常困惑.ReactJSreact-router

以下是我的理解摘要:

webpack:是一个包,一个将Web应用程序的不同部分连接在一起的工具,然后捆绑在一个.js文件中(通常bundle.js).然后,结果文件在prod环境中提供,由应用程序加载,并包含运行代码所需的所有组件.功能包括缩小代码,缩小等.

webpack-dev-server:是一个提供服务器来处理网站文件的包.它还bundle.js从客户端组件构建单个.js文件(),但在内存中提供.它还具有option(-hot)来监视所有构建文件,并在代码更改的情况下在内存中构建新的bundle.服务器直接在浏览器中提供(例如:)http:/localhost:8080/webpack-dev-server/whatever.内存加载,热处理和浏览器服务的结合使用户可以在代码更改时在浏览器上更新应用程序,非常适合开发环境.

如果我对上述文字有疑问,我真的不确定下面的内容,所以如有必要请告诉我

当使用一个常见的问题webpack-dev-server有node/express是webpack-dev-server一个服务器,是node/express.这使得运行客户端和某些节点/快速代码(API等)的环境变得棘手.注意:这是我所面对的,但很高兴理解为什么会在更多细节中发生这种情况......

webpack-dev-middleware:这是一个具有相同功能webpack-dev-server(内存捆绑,热重新加载)的中间件,但其格式可以注入server/express应用程序.通过这种方式,您可以webpack-dev-server在节点服务器中使用某种服务器(内部). 哎呀:这是一个疯狂的梦吗??? 这件作品如何解决开发和生产方程,使生活更简单

webpack-hot-middleware:这......被困在这里...找到这件作品时webpack-dev-middleware......不知道如何使用它.

ENDNOTE:对不起,有任何错误的想法.我真的需要帮助才能在复杂的环境中找到这些变体.如果方便的话,请添加更多将构建整个场景的软件包/数据.

我只能看到实际的应用程序/public.

配置webpack.config.js如下:

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

module.exports = {

  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './app/js/App.js'
],

  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: 'http://localhost:8080'
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['react-hot', 'babel-loader'],
        exclude: /node_modules/
      }
     ]
   },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]

};

项目层次结构是:

• 应用

  • JS

• node_modules

• 上市

  • CSS

  • IMG

  bundle.js

  的index.html

• 的package.json

• webpack.config.js

如何修改以确保该http://localhost:8080/条目适用于应用程序本身？

我想知道是否有一个配置选项告诉webpack只将"重要信息"记录到终端.几乎只是错误和警告,而不是所有这些:

有这么多的输出!很想压制常见的东西,只有webpack输出警告/错误.想一个解决方案webpack,webpack-dev-server以及karma-webpack.

注意:我尝试了noInfo: true,quiet: true但似乎没有做到这一点.

编辑:我认为这可能不可能,所以我在github上创建了一个问题:https://github.com/webpack/webpack/issues/1191

当我将 webpack 升级到 4.0.0-beta.3 并运行时，npx webpack serve出现以下错误：

[webpack-cli] Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
 - configuration has an unknown property 'contentBase'. These properties are valid:
   object { bonjour?, client?, compress?, devMiddleware?, firewall?, headers?, historyApiFallback?, host?, hot?, http2?, https?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, public?, setupExitSignals?, static?, transportMode?, watchFiles? }

这是我的 webpack.config.js，适用于 3.11.2：

const path = require('path');
const ArcGISPlugin = require("@arcgis/webpack-plugin");

module.exports = {
  mode: …

我是Mocha的新手,我正在尝试用它来测试一个简单的React组件.如果react组件没有任何CSS样式,则测试将通过,但如果React组件中的标记包含任何className,则会抛出语法错误:

Testing.react.js

import React from 'react';

export default class Testing extends React.Component {
  render() {
    return (
      <section>
        <form>
          <input type="text" />
        </form>
      </section>
    );
  }
}

testing.jsx

import {
  React,
  sinon,
  assert,
  expect,
  TestUtils
} from '../../test_helper';

import TestingSample from '../../../app/components/Testing.react.js';

describe('TestingSample component', function(){
    before('render and locate element', function(){
        var renderedComponent = TestUtils.renderIntoDocument(
            <TestingSample />
        );

        var inputComponent = TestUtils.findRenderedDOMComponentWithTag(
            renderedComponent, 'input'
        );

        this.inputElement = inputComponent.getDOMNode();
    });

    it('<input> should be of type "text"', function () {
        assert(this.inputElement.getAttribute('type') === 'text'); …

我正在尝试使用webpack-dev-server编译文件并启动一个开发Web服务器.

在我package.json的脚本属性设置为:

"scripts": {
  "dev": "webpack-dev-server --hot --inline",
 }

所以--hot,--inline应该启用网络服务器和热重装(据我所知).

在我的webpack.config.js文件中,我设置了entry,output和devServer设置,并添加了一个加载器来查找.vue文件中的更改:

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/public',
        publicPath: '/public',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer:{
        contentBase: __dirname + '/public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

所以通过这个设置,我运行npm run dev.webpack-dev-server启动,模块加载器测试工作(即当我保存任何.vue文件时,它会导致webpack重新编译),但是:

• 浏览器永远不会刷新
• 存储在内存中的已编译的javascript永远不会被浏览器使用

在第二个项目符号中,我可以看到这一点,因为在浏览器窗口中,vue占位符永远不会被替换,如果我打开javascript控制台,Vue实例永远不会创建或全局可用.

我错过了什么？