タグ付けされた質問 「webpack-dev-server」

私はnodejs / reactjsの世界全体に慣れていないので、私の質問がばかげているようでしたら謝罪してください。それで、私はreactabular.jsをいじっています。 私が行うときはいつでも、npm startそれは常に実行されlocalhost:8080ます。 0.0.0.0:8080公開してアクセスできるようにするには、どのように変更して実行するのですか？上記のリポジトリでソースコードを読み取ろうとしましたが、この設定を行うファイルが見つかりませんでした。 また、それに追加するには-それが80可能な場合、どのようにポートで実行するのですか？

180 node.js  reactjs  npm  webpack  webpack-dev-server 

私は環境としてCloud9.io ubuntu VM Online IDEを使用していますが、このエラーをトラブルシューティングすることで、アプリをWebpack開発サーバーで実行するだけに減らしました。 私はそれを起動します： webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT $ IPは、ホストアドレスを持つ変数です。$ PORTにはポート番号があります。 これらの変数はデフォルトのIPおよびポート情報を持っているため、Cloud 9にアプリをデプロイするときに使用するように指示されています。 サーバーが起動してコードをコンパイルします。問題ありませんが、インデックスファイルは表示されません。「無効なホストヘッダー」をテキストとして含む空白の画面のみ。 これはリクエストです： 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: …

176 reactjs  webpack-dev-server  cloud9-ide  cloud9 

このように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( …

107 reactjs  webpack  webpack-dev-server 

サーバー側でレンダリングされるアプリケーションを開発する環境での作業を開始しwebpackていnode/expressます。開発環境と本番環境（ランタイム）環境での各Webpackパッケージの役割について非常に混乱しています。ReactJSreact-router これが私の理解の要約です： webpack：パッケージであり、Webアプリケーションのさまざまな部分を結合して1つの.jsファイルにバンドルするツールです（通常はbundle.js）。結果ファイルは、アプリケーションによってロードされる本番環境で提供され、コードを実行するために必要なすべてのコンポーネントを含みます。コードの縮小、縮小などの機能があります。 webpack-dev-server：Webサイトのファイルを処理するサーバーを提供するパッケージです。またbundle.js、クライアントコンポーネントから単一の.jsファイル（）を構築しますが、メモリで提供します。また、-hotすべてのビルドファイルを監視し、コードが変更された場合にメモリ内に新しいバンドルをビルドするオプション（）もあります。サーバーはブラウザーで直接提供されます（例：）http:/localhost:8080/webpack-dev-server/whatever。インメモリロード、ホットプロセッシング、ブラウザーサービスの組み合わせにより、ユーザーはコードが変更されたときにブラウザーでアプリケーションを更新でき、開発環境に最適です。 上記のテキストに疑問がある場合、以下の内容は本当にわかりません。必要に応じてお知らせください 使用して一般的な問題webpack-dev-serverとnode/expressIS webpack-dev-serverであるとして、サーバーですnode/express。そのため、この環境では、クライアントと一部のノード/エクスプレスコード（APIなど）の両方を実行するのが難しくなっています。注：これは私が直面している問題ですが、なぜこれが発生するのかを詳しく理解するのに役立ちます... webpack-dev-middleware：これは同じ機能webpack-dev-server（インメモリバンドリング、ホットリロード）を備えたミドルウェアですが、server/expressアプリケーションに挿入できる形式になっています。このようにしてwebpack-dev-server、ノードサーバーの内部に一種のサーバー（）があります。 おっと：これはクレイジーな夢ですか??? この作品はどのようにして開発と製品の方程式を解決し、人生をよりシンプルにすることができますか webpack-hot-middleware：これ... ここにくっついて...探しているときにこの部分が見つかりました... webpack-dev-middleware使い方がわかりません。 ENDNOTE：申し訳ありませんが、間違った考えがあります。複雑な環境でこれらのバリアントを理解するために本当に助けが必要です。都合がよければ、シナリオ全体を構築するパッケージ/データを追加してください。

94 javascript  node.js  webpack  webpack-dev-server  webpack-dev-middleware 

私はwebpackに非常に慣れていません。本番ビルドでは、コード全体のサイズを削減できることがわかりました。現在、webpackは約8MBのファイルをビルドし、main.jsは約5MBをビルドします。プロダクションビルドでコードのサイズを減らす方法は？インターネットからサンプルのwebpack構成ファイルを見つけ、アプリケーション用に構成し、実行npm run buildしてビルドを開始し、./dist/ディレクトリにいくつかのファイルを生成しました。 それでもこれらのファイルは重い（開発バージョンと同じ） これらのファイルを使用するには？現在、私は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" }, …

93 node.js  reactjs  npm  webpack  webpack-dev-server 

で実際のアプリしか見ることができません/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() …

91 node.js  reactjs  webpack  reactjs-flux  webpack-dev-server 

「重要な情報」のみを端末に記録するようにwebpackに指示する構成オプションがあるかどうか知りたいのですが。エラーと警告だけで、すべてではありません。 たくさんの出力があります！一般的なものを抑制し、webpackに警告/エラーのみを出力させたいと考えています。以下のためのソリューションをご希望webpack、webpack-dev-serverとkarma-webpack。 注：私が試したnoInfo: trueとquiet: trueが、トリックを行うようには見えなかったという。 編集：これは不可能かもしれないと思っているので、githubで問題を作成しました：https：//github.com/webpack/webpack/issues/1191

91 webpack  webpack-dev-server 

私はそれが可能かどうかわからないプロジェクトで何かをしようとしています、私は間違った方法であるか、何かを誤解しています。私たちはwebpackを使用しており、アイデアは複数のhtmlファイルを提供することです。 localhost：8181-> index.htmlを提供します localhost：8181 / example.html-> example.htmlを提供します ドキュメントに従って、複数のエントリポイントを設定してこれを実行しようとしています。 フォルダ構造は次のとおりです。 / |- package.json |- webpack.config.js /src |- index.html |- example.html | /js |- main.js |- example.js Webpack.config.js： ... entry: { main: './js/main.js', exampleEntry: './js/example.js' }, output: { path: path.resolve(__dirname, 'build', 'target'), publicPath: '/', filename: '[name].bundle.js', chunkFilename: '[id].bundle_[chunkhash].js', sourceMapFilename: '[file].map' }, ... …

89 webpack  webpack-dev-server 

dockerがインストールされたUbuntu Linuxを使用します。VMなし。 私はvuejsアプリケーションでDockerイメージをビルドしました。ホットリロードを有効にするには、次のコマンドでdockerコンテナーを起動します。 docker run -it -p 8081:8080 -e "HOST=0.0.0.0" -v ${PWD}:/app/ -v /app/node_modules --name my-frontend my-frontend-image 正常に起動し、のホストブラウザからアクセスできますlocalhost:8081。しかし、ソースファイルに変更を加えて保存すると、F5キーを押す前にブラウザに反映されません（ホットリロードが機能しません）。 以下の詳細： package.json "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", build / webpack.dev.conf.js devServer: { clientLogLevel: 'warning', ... hot: true, ... watchOptions: { //poll: config.dev.poll, //aggregateTimeout: 500, // …

10 docker  vue.js  webpack-dev-server 

私はwebpack-dev-serverDockerコンテナー内でNestjsアプリケーションを実行するために使用しています。すべてが稼働していますが、VS Codeインスタンスからアプリケーションをデバッグできません。私はこの設定を使用して9229ポートを公開しようとしていますwebpack.config.js： devServer: { host: '0.0.0.0', port: 9229, }, netstat -lコンテナー内で実行すると、ノードが9229ポートをリッスンしていないことがわかります。 Dockerfileおよびdocker-composeファイルでポート9229を公開しています。Dockerfile： FROM node:12.16.1-alpine WORKDIR /usr/src/app COPY package.json yarn.lock ./ RUN yarn COPY . . EXPOSE 3000 EXPOSE 9229 CMD [ "yarn", "run", "start:debug"] そしてdocker-compose.ymlファイル： version: '3.7' services: open-tuna-api: image: opentunaapi ports: - 3000:3000 - 9229:9229 volumes: - ./dist:/usr/src/app/dist - …

8 node.js  docker  webpack  webpack-dev-server  nestjs 

Dockerコンテナ内のLaravel MixでHot Module Reloadingを設定する際にいくつか問題があります。 次のDockerfileがあります。 FROM php:7.4.0-fpm RUN curl -sL https://deb.nodesource.com/setup_13.x | bash RUN apt-get update && \ apt-get install -y -q --no-install-recommends \ nano apt-utils curl unzip default-mysql-client nodejs build-essential git \ libcurl4-gnutls-dev libmcrypt-dev libmagickwand-dev \ libwebp-dev libjpeg-dev libpng-dev libxpm-dev \ libfreetype6-dev libaio-dev zlib1g-dev libzip-dev && \ echo 'umask …

8 laravel  docker  docker-compose  webpack-dev-server  laravel-mix