标签: webpack-dev-server

我已经在webpack上研究了几个星期了,我已经看过许多前端设置的例子,可能只是后端的这一个设置.

我正在尝试设置一个带有节点后端的反应应用程序(例如express,koa,hapi等),其中我需要至少一个后端的转换步骤(例如babel,coffeescript等),并且我认为在那里使用webpack以保持一致性与在混合中添加另一种构建机制(例如gulp,grunt等)会很好.

如果我可以对后端进行更改并让服务器自动重启(监视样式)也会很棒.

我想知道最好的方法是基本上有两个不同的项目设置与自己的package.json和webpack.config文件.也许将后端一个嵌套server在顶级项目文件夹的文件夹下,并使用顶级package.json文件中的一个或多个脚本指令来控制这两个.

我想我可能需要将一台服务器代理到另一台服务器以避免CORS问题.

寻找任何更多webpack战斗测试的指导,而不是我的体面设置.

问候,托尼.

当我尝试更改我的react组件并保存它以查看hot loader是否更新了我的页面时,我在我的开发人员工具中得到了这个:

GET http://localhost:3000/public/bundle/76566a1ad7e45b834d4e.hot-update.json 404 (Not Found)hotDownloadManifest @ main.js:26hotCheck @ main.js:210check @ main.js:9288(anonymous function) @ main.js:9346
main.js:9303 [HMR] Cannot find update. Need to do a full reload!
main.js:9304 [HMR] (Probably because of restarting the webpack-dev-server)

我不确定为什么会这样.我试图运行django作为我的后端服务器(webpack说明)

这是我的webpack.watch.js:

var path = require('path');
var config = require("./webpack.config.js");
var Webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var port = process.env.WEBPACK_PORT || 3000;
var host = process.env.HOST || 'localhost';

config.entry.unshift(
    "webpack-dev-server/client?http://" + host + ":" + port,
    "webpack/hot/only-dev-server"   // only prevents reload …

我正在使用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: …

我使用 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",

面对问题 - 基于TypeScript设置一些项目原型.它包含客户端脚本和服务器部分(带有ExpressJs的NodeJ).

我想将webpack作为捆绑器并使用热重新加载功能来查看即时更改.最初,我使用react-transform-b​​oilerplate-ts,但问题出在那里 - 开发服务器的入口点是js文件.我想它应该是ts,因为我想包括我的快递配置等.

那么,是否有人有良好的样板(遵循项目结构中的最佳实践)来创建包含以下内容的项目:

• 客户端(React)和服务器(打字稿)
• 后端使用NodeJs和ExpressJs(打字稿)
• 客户端和服务器支持热重载(据我所知,最好的选择 - 是用于重新加载的webpack选项,而不是运行观看的gulp任务).

或许你可以给我很好的建议,如何以适当的方式配置这种东西.

非常感谢

我目前正在尝试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', …

我正在尝试设置我的环境,所以当我在Visual Studio 2015中单击运行时,它将安装我的节点模块,然后运行前端webpack-dev-server.

我补充道

"precompile": [ "yarn install", "yarn run start" ]

我scripts在我的project.json

如果你想看到我正在运行的启动脚本:https: //github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/scripts/start.js

它有效,有点.它将启动服务器,但不会在浏览器中打开它,它有点破坏VS到我无法停止调试,并且无法关闭VS,因为它正在调试.

那么无论如何我可以按照我想要的方式完成这项工作,或者我应该只使用cmd来启动webpack-dev-server？

我刚尝试过:

"precompile": [ "yarn install", "start cmd /k yarn run start" ]

希望我能让VS打开命令提示符并运行启动脚本,但这不起作用.

我找到了答案.要保持开放,看看是否有人有更好的解决方案.

在我的Startup.cs中,我添加了:

Process.Start("CMD.exe", "/K yarn run start");
Process.Start("cmd", "/C start http://localhost:3000");

第一行在cmd中运行我的命令,第二行在我的webpack-dev-server的端口打开我的默认浏览器.

根据用例可能有效的第二种解决方案.

下载VS的节点工具,并在解决方案中创建一个新的空节点项目.您可以转到项目的属性,并且有一个名为的输入Script (startup file).您可以将它指向您的启动脚本,就我而言scripts/start.js

我已经安装了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