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

次のような結果になるようにwebpackでグローバル変数を定義することは可能ですか？ var myvar = {}; 私が見た例はすべて外部ファイルを使用していた require("imports?$=jquery!./file.js")

138 javascript  webpack  webpack-2  webpack-3 

エラーの私の出力： 無効な構成オブジェクト。Webpackは、APIスキーマと一致しない構成オブジェクトを使用して初期化されました。-configuration.moduleに不明なプロパティ「ローダー」があります。次のプロパティは有効です：オブジェクト{exprContextCritical？、exprContextRecursive？、exprContextRegExp？、exprContextRequest？、noParse？、rules、defaultRules？、unknownContextCritical？、unknownContextRecursive？、unknownContextRegExp？、unknownContextRequest？、unsafeCache？、wrappedContextCritical？、wrappedContextRecursive ？、strictExportPresence？、strictThisContextOnImports？}->通常のモジュールに影響するオプション（NormalModuleFactory）。 私のwebpack.config.js： var webpack = require('webpack'); var path = require('path'); var BUILD_DIR = path.resolve(__dirname, 'src/client/public'); var APP_DIR = path.resolve(__dirname, 'src/client/app'); var config = { entry: APP_DIR + '/index.jsx', module : { loaders : [ { test : /\.jsx?/, include : APP_DIR, loader : 'babel-loader' } ] }, output: …

136 reactjs  webpack 

私はで遊んだReactとES6使用babelしてwebpack。複数のコンポーネントを異なるファイルで構築し、単一のファイルにインポートして、それらをバンドルしたいwebpack 私がこのようないくつかのコンポーネントを持っているとしましょう： my-navbar.jsx import React from 'react'; import Navbar from 'react-bootstrap/lib/Navbar'; export class MyNavbar extends React.Component { render(){ return ( <Navbar className="navbar-dark" fluid> ... </Navbar> ); } } main-page.jsx import React from 'react'; import ReactDOM from 'react-dom'; import MyNavbar from './comp/my-navbar.jsx'; export class MyPage extends React.Component{ render(){ return( <MyNavbar /> …

135 reactjs  ecmascript-6  webpack 

反応プロジェクトの画像に問題があります。確かに、私はいつもsrc属性への相対パスはファイルアーキテクチャ上に構築されていると思っていました ここに私のファイルアーキテクチャ： components file1.jsx file2.jsx file3.jsx container img js ... ただし、パスがURLに基​​づいて構築されていることに気付きました。私のコンポーネントの1つ（たとえば、file1.jsx内）には次のようになっています。 localhost/details/2 <img src="../img/myImage.png" /> -> works localhost/details/2/id <img src="../img/myImage.png" /> -> doesn't work, images are not displayed この問題を解決するにはどうすればよいですか？react-routerで処理されるどのような形式のルートでも、すべての画像を同じパスで表示できることを望んでいます。

135 javascript  reactjs  webpack 

私は初期化されたシンプルなアプリを持っています angular-cli。 3つのルートに関連するいくつかのページを表示します。3つのコンポーネントがあります。このページのIの使用のいずれかにlodashいくつかのデータを取得するために、角2 HTTPモジュール（RxJS使用してObservableSを、mapとsubscribe）。単純なを使用してこれらの要素を表示します*ngFor。 しかし、私のアプリは本当にシンプルであるにもかかわらず、私は（私の意見では）巨大なバンドルパッケージとマップを取得しています。私はgzipのバージョンについては話しませんが、gzipする前のサイズです。この質問は、一般的な推奨事項の問い合わせです。 一部のテスト結果： ビルド ハッシュ：8efac7d6208adb8641c1時間：10129msチャンク{0} main.bundle.js、main.bundle.map（main）18.7 kB {3} [初期] [レンダリング] チャンク{1} styles.bundle.css、styles.bundle.map、styles.bundle.map（styles）155 kB {4} [初期] [レンダリング] チャンク{2} scripts.bundle.js、scripts.bundle.map（scripts）128 kB {4} [初期] [レンダリング] チャンク{3} vendor.bundle.js、vendor.bundle.map（vendor）3.96 MB [初期] [レンダリング] チャンク{4} inline.bundle.js、inline.bundle.map（inline）0バイト[エントリ] [レンダリング] 待つ：そのような単純なアプリ用の10Mbベンダーバンドルパッケージ？ ng build --prod ハッシュ：09a5f095e33b2980e7cc時間：23455ミリ秒のチャンク{0} main.6273b0f04a07a1c2ad6c.bundle.js、main.6273b0f04a07a1c2ad6c.bundle.map（main）18.3 kB {3} [初期] [レンダリング] チャンク{1} styles.bfdaa4d8a4eb2d0cb019.bundle.css、styles.bfdaa4d8a4eb2d0cb019.bundle.map、styles.bfdaa4d8a4eb2d0cb019.bundle.map（styles）154 kB {4} [初期] チャンク{2} scripts.c5b720a078e5464ec211.bundle.js、scripts.c5b720a078e5464ec211.bundle.map（scripts）128 …

135 angular  webpack  angular-cli 

私はreactjsの初心者です。reactアプリにブートストラップを含めたいです ブートストラップをインストールしました npm install bootstrap --save 今、私の反応アプリでブートストラップCSSとJSをロードしたいと思います。 私はwebpackを使用しています。 webpack.config.js var config = { entry: './src/index', output: { path: './', filename: 'index.js' }, devServer: { inline: true, port: 8080, historyApiFallback: true, contentBase:'./src' }, module: { loaders: [ { test: /\.js?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } } …

135 twitter-bootstrap  reactjs  webpack 

更新：2018年12月（「Aniket」の回答を参照） Angular CLI 6を使用する場合は、ng排出が非推奨であり、8.0で間もなく削除されるため、ビルダーを使用する必要があります。 更新：2018年6月：Angular 6はngの取り出しをサポートしていません** 更新：2017年2月：NGイジェクトを使用 更新：2016年11月：angular-cliはwebpackのみを使用するようになりました。通常はnpm install -g angular-cliを使用してインストールするだけです。「私たちはビルドシステムをbeta.10とbeta.14の間でSystemJSからWebpackに変更しました。」しかし、実際には構造とフォルダーの最初だけにangular-cliを使用し、その後、手動でwebpack configを使用しています 私はこれでangular cliをインストールしました： npm install -g angular-cli@webpack angular1とweb packを使用していたときに、「webpack.config.js」ファイルを変更してすべてのタスクとプラグインを実行していましたが、angular-cliを使用して作成されたこのプロジェクトで、誰が機能するのかわかりません。魔法です？ 私が行うときにWebpackが機能しているのがわかります： ng serve "Version: webpack 2.1.0-beta.18" しかし、私はangular-cli構成が機能する方法を理解していません...

132 angular  webpack  angular-cli 

私はwebpack2を使い始めました（正確には、v2.3.2）構成を再作成した後、解決できないように思える問題が発生し続けます（醜いダンプのために事前に申し訳ありません）： ERROR in ./src/main.js Module not found: Error: Can't resolve 'components/DoISuportIt' in '[absolute path to my repo]/src' resolve 'components/DoISuportIt' in '[absolute path to my repo]/src' Parsed request is a module using description file: [absolute path to my repo]/package.json (relative path: ./src) Field 'browser' doesn't contain a valid alias configuration aliased …

131 npm  webpack  commonjs  webpack-2  package.json 

私はwebpackを初めて使用し、それを使用するように既存のWebアプリケーションを変換しています。 私はwebpackを使用してJSのバンドルと縮小を行っていますが、これは展開時に最適ですが、これにより開発中のデバッグが非常に難しくなります。 通常、私はJSの問題をデバッグするためにクロムの組み込みデバッガーを使用します。（またはFirefoxのFirebug）。ただし、webpackを使用すると、すべてが1つのファイルに詰め込まれ、そのメカニズムを使用してデバッグすることが困難になります。 バンデリングをすばやくオンまたはオフにする方法はありますか？または縮小をオンまたはオフにしますか？ スクリプトローダーの構成やその他の設定があるかどうかを確認しましたが、明らかではありません。 すべてをモジュールのように動作するように変換して使用するための時間はまだありません。したがって、ロードにはrequire（ "script！./ file.js"）パターンを使用するだけです。

130 javascript  webpack 

このようなクラス（typescriptで記述）があり、それをwebpackでにバンドルするとしbundle.jsます。 export class EntryPoint { static run() { ... } } 私のindex.htmlにはバンドルを含めますが、その静的メソッドも呼び出したいと思います。 <script src="build/bundle.js"></script> <script> window.onload = function() { EntryPoint.run(); } </script> ただし、EntryPointこの場合は未定義です。バンドルされたJavaScriptを別のスクリプトから呼び出すにはどうすればよいですか？ 追加：Webpack設定ファイル。

130 javascript  html  typescript  webpack 

ブレークポイントが機能するようにAngularとVSCodeを構成するにはどうすればよいですか？

127 angular  debugging  webpack  visual-studio-code 

React.jsを学習していますが、Windows 8 OSを使用しています。ルートフォルダに移動しました 1.Created the package.json file by npm init 2. install webpack by npm install -S webpack.now webpack has been downloaded to my modules folder 3. install webpack globally by typing npm install webpack -g 4. i am also having a webpack.config.js in my root folder which contains the …

125 npm  webpack 

CLI（v3.7.0）を使用して新しいプロジェクトを作成する場合dart-sass、node-sassコンパイラーを選択するオプションがあります。 Vueのドキュメントで宣言されているよりも具体的に、これらは互いにどのように比較されますか？ Sassパフォーマンスに関するヒント Dart Sassを使用する場合、非同期コールバックのオーバーヘッドのため、同期コンパイルはデフォルトで非同期コンパイルの2倍の速度であることに注意してください。このオーバーヘッドを回避するために、ファイバーパッケージを使用して、同期コードパスから非同期インポーターを呼び出すことができます。これを有効にするには、プロジェクトの依存関係としてファイバーをインストールするだけです。 npm install -D fibers また、ネイティブモジュールであるため、OSやビルド環境によって互換性の問題が異なる場合があることにも注意してください。その場合は、実行npm uninstall -D fibersして問題を解決してください。 ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ❯ Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less Stylus 編集2020/01： Vue CLI 4.2.2新しいプロジェクトの作成はdart-sass、前の最初のオプションとしてまだ提案されていますnode-sass。それでもnode-sass、よりパフォーマンスの高い選択肢であることがここで確立されており、ダーツサスを使用する人はほとんどいません（ccleveのコメント）。 EDIT 2020/09：としてアリBahramiは彼の豊富な答えを更新し、dart-sass好ましい選択肢であるとしてnode-sass廃止予定としてマークされています。 dart-sassJSでコンパイルされたバージョンはパフォーマンスが悪いので残念です。ただし、開発者はこれを十分に認識しており、この号で述べられているように、パフォーマンスの向上に取り組んでいます。

121 vue.js  webpack  sass  vue-cli  node-sass 

私はタスクランナーとバンドラーの世界では少し新しいです。 Grunt、Gulp、Webpack、Browserify 、両者に大きな違いがあるとは感じませんでした。言い換えれば、Webpackはタスクランナーが行うすべてのことを実行できると感じています。しかし、それでもgulpとwebpackが一緒に使用されている巨大な例がありました。理由が分からなかった。 これが初めてなので、間違った方向に進んでいる可能性があります。あなたが私が欠けているものを指摘することができればそれは素晴らしいでしょう。役立つリンクがあれば大歓迎です。 前もって感謝します。

117 gruntjs  gulp  bundler  browserify  webpack 

私は、react-routerとともに開発中のwebpack-dev-serverを使用するアプリを作成しています。 webpack-dev-serverは、パブリックエントリポイントが1か所（つまり "/"）にあるとの想定に基づいて構築されているようですが、react-routerではエントリポイントの数に制限はありません。 webpack-dev-serverの利点、特に生産性に優れたホットリロード機能が欲しいのですが、react-routerで設定されたルートをロードできるようにしたいのです。 彼らが一緒に働くようにそれをどのように実装できますか？これを可能にするような方法で、webpack-dev-serverの前で高速サーバーを実行できますか？

117 javascript  reactjs  webpack  react-router