标签: webpack-dev-server

为了使用我想要集成到我的应用程序中的模块(我在本地开发),我必须做两件事:
1)让我的应用程序在HTTPS上本地运行.
2)使用特定域运行应用程序.

使用我用于本地开发的Webpack开发服务器这两件事情应该非常简单,但由于某种原因,它不能像文档建议的那样工作.

我的webpack.config档案是:

module.exports = {
  entry: './app/js/app.js',
  output: {
    path:'./app/js/',
    publicPath: 'https://specialurl.com/assets',
    filename:'bundle.js'
 }

我指向的路径已添加到我的计算机上的hosts文件中,因此它应该与localhost默认值一样有效.

我的package.json文件有这个作为开发服务器的启动脚本:

"scripts": {
"start": "webpack-dev-server --progress --colors --https",
}

我做了这些更改,然后在保存后我以npm start重新启动.问题是服务器仍然没有在https上运行,当我将浏览器指向新链接时,它只显示任何内容.我发现的所有文档看起来都应该有效,所以我必须遗漏一些明显的东西.

我正在使用Ubuntu 15.10在虚拟机上运行webpack服务器,使用vagrant over mac OSX.

webpack配置很干净:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpack = require('webpack');

var MINIFY = process.env.MINIFY === true;

var FRONTEND_ROOT = './static'
var SRC_PATCH = FRONTEND_ROOT + '/scripts';
var BUILD_PATH = './dist';


module.exports = {
  entry: SRC_PATCH + '/main.js',
  devtool: 'source-map',
  output: {
      path: BUILD_PATH,
      filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    modulesDirectories: [SRC_PATCH, 'node_modules']
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(FRONTEND_ROOT, 'index-template.html'),
      minify: MINIFY
    })
  ],
  module: {
    loaders: …

当我启动webpack-dev-server时,我收到此错误:

ERROR in multi main
Module not found: Error: Cannot resolve 'file' or 'directory' /var/www/html/151208-DressingAphrodite/app in /var/www/html/151208-DressingAphrodite
 @ multi main

这是我的webpack.config.js:

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require ('html-webpack-plugin');

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

module.exports = {
  entry : [
    'babel-polyfill',
    'webpack-dev-server/client?http://localhost:8080',
    PATHS.app
  ],
  output : {
      publicPath : '/',
      filename : 'dressingaphrodite.js',
      hash : true
  },
  debug : true,
  devServer : {
    contentBase : './app' …

我使用 React + Redux + Webpack + WebpackDevserver.一旦热启动器启动,我的所有减速器都将重置为初始状态.

我能以某种方式保持我的减速器处于实际状态吗？

我的Webpack配置包含:

entry: [
    "./index.jsx"
],
output: {
    filename: "./bundle.js"
},
module: {
    loaders: [
        {
            test: /\.js|\.jsx$/,
            exclude: /node_modules/,
            loaders: ["react-hot","babel-loader"],
         }
    ]
},
plugins: [
    new webpack.HotModuleReplacementPlugin()
]

我的减速器统计数据:

const initialState = {
...
}

export default function config(state = initialState, action) { ...

我只是通过以下方式启动我的Webpack Dev-Server:

"start": "webpack-dev-server",

完整的Github项目:https://github.com/pbrianmackey/uiexperiment

我跑

webpack-dev-server --content-base deployment/

然后转到http://localhost:8080/,错误

不能获取 /

我认为问题是webpack的配置错误.我检查了webpack.config.js文件并没有看到问题.我怎么能解决这个问题,所以我得到了我的问候世界的例子？

它也可能是一个路由问题.我想我可以在没有react-router的情况下使用这个网站,但我可能错了.控制台上的webpacks输出没有错误.

index.js

import "babel-polyfill";//for flipping IE
import $ from 'jquery';
import jQuery from 'jquery';
var App = require('./app');
var React = require('react');
var ReactDOM = require('react-dom')

var Hello = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

我目前正在尝试monorepo架构.

我想做的是在我的web包中我运行webpack dev服务器我希望它能看到某些node_modules(符号链接的本地包)进行更改并触发"重建".

这样我就可以单独构建依赖项,我的浏览器会对这些更改做出反应.

我的webpack配置如下:

var loaders = require('./../../../build/loaders-default');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: ['./src/index.ts'],
    output: {
        filename: 'build.js',
        path: path.join(__dirname, 'dist')
    },
    resolve: {
        extensions: ['.ts', '.js', '.json']
    },
    resolveLoader: {
        modules: ['node_modules']
    },
    devtool: 'inline-source-map',
    devServer: {
        proxy: [
            {
                context: ['/api-v1/**', '/api-v2/**'],
                target: 'https://other-server.example.com',
                secure: false
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            inject: 'body',
            hash: true
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery', …

我已经安装了webpack

npm install -g webpack

和

npm install webpack 

我还安装了webpack-dev-server

npm install -g webpack-dev-server

完成安装后,我运行了命令webpack但是,它显示以下错误

webpack:找不到命令

我没有得到什么是错误.

我试图用服务器端渲染构建ReactJs应用程序我的客户端和服务器的入口点:

client.jsx

const store = createStore(window.__INITIAL_STATE__);

hydrate(
  <Provider store={store}>
    <BrowserRouter>{renderRoutes(routes)}</BrowserRouter>
  </Provider>,
  document.querySelector('#root')
);

server.jsx

const app = express();

if (isDev) {
  const webpack = require('webpack');
  const webpackDevMiddleware = require('webpack-dev-middleware');
  const config = require('../../webpack.config.js');
  const compiler = webpack(config);

  app.use(express.static('/public'));
  app.use(
    webpackDevMiddleware(compiler, {
      publicPath: config.output.publicPath,
      stats: 'errors-only',
    })
  );
}

app.get('*', (req, res) => {
  const helmet = Helmet.renderStatic();
  const htmlAttrs = helmet.htmlAttributes.toComponent();
  const bodyAttrs = helmet.bodyAttributes.toComponent();

  const context = {};
  const data = {};

  res.set('content-type', 'text/html');

  res.send(
    '<!DOCTYPE html>' +
      renderToString( …

这是我的用例.在共享服务器上同时运行的几个webpack-dev-servers实例正在其一个端口上提供内容.

在某些时候,每个站点都会陷入[WDS]断开连接!循环.我不清楚破坏点在哪里,但很明显,它与WDS实例的数量相关.

所以我的问题是什么是瓶颈RAM,CPU,太多的WebSocket连接？也许这是配置的事情？

你遇到过类似的问题吗？

有办法解决吗？我的意思是除了在本地机器上工作:)

• 节点:8.9.1
• webpack:3.5.5
• webpack-dev-server:2.7.1

这是路由配置:

<Route path='/' component={CoreLayout}>
  <IndexRoute component={HomeView}/>
  <Route path='/404' component={NotFoundView}/>
  <Redirect from='*' to='/404'/>
</Route>

这是webpack-dev-server的代理配置:

proxy: {
  '/service': 'http://localhost:8080'
}

快速服务器侦听3000端口.

我希望发送到http:// localhost:3000/service的所有请求都将转移到http:// localhost:8080,但似乎react-router处理所有请求并且代理不起作用.

任何人都知道如何解决这个问题？先感谢您