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

WebpackはJavaScriptモジュールバンドルです。Webpackは依存関係のあるモジュールを受け取り、それらのモジュールを表す静的アセットを生成します。Webpackの主要な機能は拡張性に基づいており、開発者はWebアーキテクチャとWebパフォーマンスのベストプラクティスを使用できます。

4
構成ファイルを保存し、Reactを使用して読み取る方法
私はreact.jsの初心者です。サーバーからデータをフェッチして次のように使用する1つのコンポーネントを実装しました。 CallEnterprise:function(TenantId){ fetchData('http://xxx.xxx.xx.xx:8090/Enterprises?TenantId='+TenantId+' &format=json').then(function(enterprises) { EnterprisePerspectiveActions.getEnterprise(enterprises); }).catch(function() { alert("There was some issue in API Call please contact Admin"); //ComponentAppDispatcher.handleViewAction({ // actionType: MetaItemConstants.RECEIVE_ERROR, // error: 'There was a problem getting the enterprises' //}); }); }, Urlを構成ファイルに保存したいので、これをテストサーバーまたはプロダクションに展開したときに、jsファイルではなく構成ファイルのURLを変更する必要がありますが、react.jsで構成ファイルを使用する方法がわかりません 誰でも私にこれをどのように達成できるかを教えてくれますか?

2
エラー:NodeSassバージョン5.0.0は^ 4.0.0と互換性がありません
次のコマンドを使用して、空のReactプロジェクトを作成しました:npx create-react-appon npmv7.0.7およびNodev15.0.1 インストール済み: React v17.0.1、 node-sass v5.0.0、 次に、空白の.scssファイルをAppコンポーネントにインポートしようとしました。 App.js import './App.scss' function App() { return ( <div className="App"> App </div> ); } export default App; エラーをスローします: Failed to compile. ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/s ass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss) Error: Node Sass version 5.0.0 is incompatible with ^4.0.0. package.json { "name": "react-17-node-sass-5", "version": "0.1.0", "private": true, …

5
webpackを使用してディレクトリから画像を動的にインポートする
ES6を介して画像とアイコンをwebpackにインポートするための現在のワークフローは次のとおりです。 import cat from './images/cat1.jpg' import cat2 from './images/cat2.svg' import doggy from './images/doggy.png' import turtle from './images/turtle.png' <img src={doggy} /> これはすぐに乱雑になります。ここに私が欲しいものがあります: import * from './images' <img src={doggy} /> <img src={turtle} /> 特定のディレクトリからすべてのファイルを拡張子ではなく名前として動的にインポートし、必要に応じてそれらのファイルを使用する方法が必要だと思います。 これが行われたのを見た人、またはそれについて最善の方法を考えている人はいますか? 更新: 選択した答えを使用して、これを行うことができました: function importAll(r) { let images = {}; r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); …

11
Webpack-webpack-dev-server:コマンドが見つかりません
このチュートリアルと一緒に、大まかにwebpackを使用してReact webappに取り組んでいます。 誤って、node_modulesフォルダーをgitに追加しました。次に、を使用してもう一度削除しましたgit rm -f node_modules/*。 ここで、webpackサーバーを起動しようとすると、次のエラーが発生します。 > webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors sh: webpack-dev-server: command not found npm ERR! Darwin 14.4.0 npm ERR! argv "node" "/usr/local/bin/npm" "run" "devserve" npm ERR! node v0.12.4 npm ERR! npm v2.10.1 npm ERR! file sh npm ERR! code ELIFECYCLE npm ERR! …
97 node.js  npm  webpack 

1
Ruby on Rails、Webpack、React JSを使用してChromeでソースマップを1行オフ
inline-source-mapChrome devtoolsデバッガーを使用すると、構成設定を使用してWebpackによって生成されたソースマップが1行ずれるという問題があります。Ruby on Railsアプリケーション内にWebpackがセットアップされ、数十のモジュールで構成される連結された非縮小JavaScriptファイルが生成されます。これらのモジュールのほとんどはReactJSコンポーネントであり、jsxローダーによって解析されます。Webpackからの出力は、application.jsgemsによって生成された他のJavaScriptライブラリとともにファイルに含まれます。 使用してeval-source-mapも問題ありません。の使用に関する何かがinline-source-map原因で、行番号が1つ破棄されます。 ReactコンポーネントではないJavaScriptの検査でもこの問題があるため、jsxの使用に関連しているとは思いません。

2
prefetchPlugin&analyzeツールを使用してWebpackのビルド時間を最適化するにはどうすればよいですか?
これまでの研究: webpackのwikiが言うように、分析ツールを使用してビルドのパフォーマンスを最適化することが可能です。 から:https : //github.com/webpack/docs/wiki/build-performance#hints-from-build-stats ビルド統計からのヒント ビルドを視覚化し、ビルドサイズとビルドパフォーマンスを最適化する方法についてのヒントを提供する分析ツールがあります。 webpack --profile --json> stats.jsonを実行して、必要なJSONファイルを生成できます 私は(統計情報ファイルを生成し、ここで利用可能)のWebPACKのanalizeツールにアップロードし、下のヒントのタブ私はprefetchPluginを使用するように言わ: から:http : //webpack.github.io/analyse/#hints 長いモジュール構築チェーン プリフェッチを使用して、ビルドのパフォーマンスを向上させます。チェーンの途中からモジュールをプリフェッチします。 prefechPluginで利用できる唯一のドキュメントは次のとおりです。 から:https : //webpack.js.org/plugins/prefetch-plugin/ PrefetchPlugin new webpack.PrefetchPlugin([context], request) 通常のモジュールに対する要求。これは、モジュールが必要になる前に解決され、ビルドされます。これにより、パフォーマンスが向上します。最初にビルドのプロファイルを作成して、先読みの賢いポイントを特定してください。 私の質問: prefetchPluginを適切に使用するにはどうすればよいですか? 分析ツールで使用する適切なワークフローは何ですか? prefetchPluginが機能するかどうかを確認するにはどうすればよいですか?どうすれば測定できますか? チェーンの途中からモジュールをプリフェッチするとはどういう意味ですか? いくつかの例を本当に感謝します この質問を、prefechPluginと分析ツールを使用したい次の開発者にとって貴重なリソースにするのを手伝ってください。ありがとうございました。

2
Chromeメモリキャッシュとディスクキャッシュ
Chromeメモリキャッシュとディスクキャッシュに興味がありますか?私は一般的なチャンクプラグインであるwebpackを使用して、すべてのファイルをチャンクハッシュで生成します。 メモリとディスクキャッシュの違いは何ですか。ページをリロードすると、一部のファイルがメモリキャッシュから読み込まれ、一部のファイルがディスクキャッシュから読み込まれます(bundle.jsとimage.jpgがメモリキャッシュから、cssがディスクキャッシュから)。時々それは異なります。それを制御して、どこから何をロードするかを選択できますか?メモリキャッシュはディスクキャッシュよりも高速のようです。

5
Bootstrap4の依存関係PopperJsがAngularでエラーをスローする
新しいブランドを作りました 角度クリプロジェクト を実行npm install bootstrap@4.0.0-beta jquery popper.js --save し、.angular-cli.jsonの関連パーツを以下のように実行および変更しました "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/popper.js/dist/popper.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ], ただし、以下のエラーを受け取ります 10:2287 Uncaught SyntaxError: Unexpected token export at eval (<anonymous>) at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9) at Object.../../../../script-loader/index.js!../../../../popper.js/dist/popper.js (popper.js?4b43:1) at __webpack_require__ (bootstrap 4403042439558687cdd6:54) at Object.2 (scripts.bundle.js:66) at __webpack_require__ (bootstrap 4403042439558687cdd6:54) at webpackJsonpCallback (bootstrap 4403042439558687cdd6:25) …


11
React.jsでGoogleフォントを使用する方法
React.jsとwebpackでウェブサイトを構築しました。 WebページでGoogleフォントを使用したいので、セクションにリンクを配置します。 Googleフォント <link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"> そしてCSSを設定する body{ font-family: 'Bungee Inline', cursive; } ただし、機能しません。 この問題を解決するにはどうすればよいですか?

6
requireステートメントなしでwebpackを使用してディレクトリ内のすべてのファイルをロードする方法
アプリの4つのサブディレクトリに分割された大量のJavaScriptファイルがあります。うなり声で私はそれらすべてを取得し、1つのファイルにコンパイルします。これらのファイルにはmodule.exports関数がありません。 Webpackを使用して4つの部分に分割したいと思います。手動で行ってすべてのファイルを要求したくありません。 コンパイル時にディレクトリツリーをウォークし、すべての.jsファイル名とパスを取得し、サブディレクトリ内のすべてのファイルを要求して、それを出力に追加するプラグインを作成したいと思います。 各ディレクトリのすべてのファイルをモジュールにコンパイルして、エントリポイントファイルから必要とするか、http: //webpack.github.io/docs/plugins.htmlで言及されているアセットに含めることができます。 新しいファイルを追加するときは、正しいディレクトリにドロップして、それが含まれることを確認したいだけです。 これを行うために誰かが作成したwebpackまたはプラグインでこれを行う方法はありますか?

2
Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs etc
サーバー側でレンダリングされるアプリケーションを開発する環境での作業を開始し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:申し訳ありませんが、間違った考えがあります。複雑な環境でこれらのバリアントを理解するために本当に助けが必要です。都合がよければ、シナリオ全体を構築するパッケージ/データを追加してください。

8
Webpackでプロダクションコードを作成する方法と使用方法
私は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" }, …

9
Webpackを使用した環境に基づく条件付きビルド
私はいくつかの開発用のものを持っています-例えば、分散ビルドファイルを膨らませたくないモック。 RequireJSでは、プラグインファイルで設定を渡し、それに基づいて条件付きで条件を要求できます。 Webpackの場合、これを行う方法がないようです。まず、環境のランタイム構成を作成するために、resolve.aliasを使用して、環境に応じてrequireを再ポイントしました。例: // All settings. var all = { fish: 'salmon' }; // `envsettings` is an alias resolved at build time. module.exports = Object.assign(all, require('envsettings')); 次に、webpack構成を作成するときに、どのファイルをenvsettings指すか(つまりwebpackConfig.resolve.alias.envsettings = './' + env)を動的に割り当てることができます。 しかし、私は次のようなことをしたいと思います: if (settings.mock) { // Short-circuit ajax calls. // Require in all the mock modules. } しかし、明らかに、環境がモックでない場合は、これらのモックファイルを組み込みたくありません。 必要に応じて、resolve.aliasを使用して、これらすべての必要なファイルを手動でスタブファイルに再ポイントすることもできます。 どうすればそれを行うことができますか?ありがとう。

23
Webpack:「名前が大文字と小文字だけが異なるモジュールが複数あります」が、参照されるモジュールは同一です
webpack 3.8.1を使用していますが、次のビルド警告のインスタンスがいくつか表示されます。 WARNING in ./src/Components/NavBar/MainMenuItemMobile.js There are multiple modules with names that only differ in casing. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic. Use equal casing. Compare these module identifiers: * /Users/path/to/babel-loader/lib/index.js!/Users/path/to/NavBar/MainMenuItemMobile.js Used by 1 module(s), i. e. /Users/path/to/babel-loader/lib/index.js!/Users/path/to/NavBar/ConstructedMainMenuItems.js * /Users/path/to/babel-loader/lib/index.js!/Users/path/to/Navbar/MainMenuItemMobile.js Used by …

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.