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

現在、webpack / babelを介してReactアプリでES6を使用しています。インデックスファイルを使用して、モジュールのすべてのコンポーネントを収集し、それらをエクスポートしています。残念ながら、これは次のようになります。 import Comp1_ from './Comp1.jsx'; import Comp2_ from './Comp2.jsx'; import Comp3_ from './Comp3.jsx'; export const Comp1 = Comp1_; export const Comp2 = Comp2_; export const Comp3 = Comp3_; だから私はこのように他の場所からうまくインポートすることができます： import { Comp1, Comp2, Comp3 } from './components'; 明らかにそれはあまり良い解決策ではないので、他に方法があるかどうか疑問に思いました。インポートしたコンポーネントを直接エクスポートできないようです。

202 javascript  ecmascript-6  webpack  babeljs 

moment.jsWebpackを使用しているときに、すべてのロケール（英語のみが必要です）のロードを停止できる方法はありますか？私はソースを探していますが、それhasModuleが定義されている場合、それはwebpackの場合、常にrequire()すべてのロケールを試行します。私はこれを修正するためにプルリクエストが必要だと確信しています。しかし、webpack設定でこれを修正できる方法はありますか？ 以下は、momentjsをロードするための私のwebpack設定です。 resolve: { alias: { moment: path.join(__dirname, "src/lib/bower/moment/moment.js") }, }, それなら、どこでも必要なときに、ただやるだけですrequire('moment')。これは機能しますが、バンドルに約250 kBの不要な言語ファイルが追加されます。また、私はmomentjsとgulpのバウアーバージョンを使用しています。 また、これがwebpack設定で修正できない場合は、ロケールをロードする関数へのリンクがあります。ステートメントに追加&& module.exports.loadLocalesしてみましたが、ifwebpackは実際には機能しません。それはrequire何があっても問題ありません。今は正規表現を使用していると思いますので、どうすれば修正できるかわかりません。

199 javascript  gulp  momentjs  webpack 

/ distに入るアセットを自動化しようとしています。次のconfig.jsがあります。 module.exports = { context: __dirname + "/lib", entry: { main: [ "./baa.ts" ] }, output: { path: __dirname + "/dist", filename: "foo.js" }, devtool: "source-map", module: { loaders: [ { test: /\.ts$/, loader: 'awesome-typescript-loader' }, { test: /\.css$/, loader: "style-loader!css-loader" } ] }, resolve: { // you can …

189 webpack 

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

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

私が使用しています反応するアプリを作成し、したくありませんeject。 @ font-faceを介してインポートされ、ローカルにロードされたフォントをどこに置くべきか明確ではありません。 つまり、ロードしています @font-face { font-family: 'Myriad Pro Regular'; font-style: normal; font-weight: normal; src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff'); } 助言がありますか？ -編集 ダンが回答に言及した要点を含める ➜ Client git:(feature/trivia-game-ui-2) ✗ ls -l public/static/fonts total 1168 -rwxr-xr-x@ 1 maximveksler staff 62676 Mar 17 2014 MYRIADPRO-BOLD.woff -rwxr-xr-x@ 1 maximveksler staff 61500 Mar 17 2014 …

177 css  reactjs  fonts  webpack  create-react-app 

可能なはずのことをやろうとしているのですが、webpackのドキュメントだけではどうすればいいのか理解できません。 相互に依存している、または依存していないいくつかのモジュールを含むJavaScriptライブラリを作成しています。その上、jQueryはすべてのモジュールで使用され、それらの一部にはjQueryプラグインが必要な場合があります。このライブラリは、一部またはすべてのモジュールを必要とするいくつかの異なるWebサイトで使用されます。 モジュール間の依存関係を定義することは非常に簡単でしたが、サードパーティの依存関係を定義することは、思ったより難しいようです。 私が達成したいこと：各アプリについて、必要なサードパーティの依存関係を含むものと、ライブラリからの必要なモジュールを含むものの2つのバンドルファイルを用意します。 例：私のライブラリに次のモジュールがあるとします。 a（必要：jquery、jquery.plugin1） b（必須：jquery、a） c（jquery、jquery.ui、a、bが必要） d（jquery、jquery.plugin2、aが必要） そして、モジュールa、b、cを必要とするアプリ（一意のエントリファイルとして表示する）があります。この場合のWebpackは、次のファイルを生成します。 ベンダーバンドル：jquery、jquery.plugin1、jquery.ui; ウェブサイトバンドル：モジュールa、b、cを使用。 結局のところ、jQueryをグローバルとして使用したいので、すべてのファイルでjQueryを要求する必要はありません（たとえば、メインファイルでのみ要求することができます）。そして、jQueryプラグインは、必要な場合に備えて$グローバルを拡張するだけです（それらを必要としない他のモジュールで使用できる場合は問題ありません）。 これが可能であると仮定すると、この場合のwebpack構成ファイルの例は何でしょうか？設定ファイルでローダー、エクスターナル、プラグインのいくつかの組み合わせを試してみましたが、実際にそれらが何をしていて、どれを使用するべきかわかりません。ありがとうございました！

173 javascript  webpack  external-dependencies 

create-react-appパッケージでReactJSプロジェクトを作成しましたが、うまくいきましたが、webpackファイルと構成が見つかりません。 react-create-appはwebpackでどのように機能しますか？webpack構成ファイルは、デフォルトのインストールのどこにありますcreate-react-appか？プロジェクトのフォルダーに構成ファイルが見つかりません。 オーバーライド構成ファイルを作成していません。他の記事で構成設定を管理できますが、従来の構成ファイルを見つけたいです。

172 javascript  reactjs  webpack  ecmascript-6  create-react-app 

誰かがwebpack.config.jsファイルに複数の出力パスを作成する方法を知っていますか？いくつかの異なるフォントファイルが付属しているbootstrap-sassなどを使用しています。webpackがこれらを処理するために、正常に機能しているファイルローダーが含まれていますが、出力するファイルは、指定した出力パスに保存されています残りのファイル： output: { path: __dirname + "/js", filename: "scripts.min.js" } Webpackが出力しているすべての拡張子タイプと、末尾が.woff .eotなどの拡張子タイプを調べて、別の出力パスに流用できるようなものを実現したいと思います。これは可能ですか？ 私は少しグーグルして、いくつかのソリューションが提供されているgithubでこの*問題に遭遇しました、編集： しかし、ハッシュ方法を使用して出力を指定できるようにエントリポイントを知る必要があるかのように見えます。例： var entryPointsPathPrefix = './src/javascripts/pages'; var WebpackConfig = { entry : { a: entryPointsPathPrefix + '/a.jsx', b: entryPointsPathPrefix + '/b.jsx', c: entryPointsPathPrefix + '/c.jsx', d: entryPointsPathPrefix + '/d.jsx' }, // send to distribution output: { path: './dist/js', …

165 path  output  config  webpack  loader 

私はまだwebpackでモジュールパスを解決する方法を混同しています。今私は書きます： myfile = require('../../mydir/myfile.js') でも書きたい myfile = require('mydir/myfile.js') エイリアスとして使用している同様の例を見ることができるので、resolve.aliasが役立つかもしれないと考えていました。{ xyz: "/some/dir" }require("xyz/file.js") しかし、エイリアスをに設定すると{ mydir: '/absolute/path/mydir' }、機能しrequire('mydir/myfile.js') ません。 何度もドキュメントを読んだことがあり、何か不足しているように感じるので、私は馬鹿げていると感じます。相対的な必要事項をすべて書くことを避けるための正しい方法は何../../ですか？

164 javascript  webpack 

プロジェクトに新しいnpmパッケージを追加し、モジュールの1つにそれを必要としました。 今、私はこのメッセージをwebpackから受け取ります、 build modulesNote: The code generator has deoptimised the styling of "D:/path/to/project/node_modules/ramda/dist/ramda.js" as it exceeds the max of "100KB". どういう意味ですか？何かアクションを起こす必要がありますか？

164 webpack  babeljs 

webpackでgulpを使用している人がいます。しかし、私はwebpackを読んでgulpを置き換えることができますか？私はここで完全に混乱しています...誰かが説明できますか？ 更新 結局、gulpから始めました。私はモダンなフロントエンドに不慣れで、すぐに立ち上げて実行したいと思っていました。1年以上たって足がかなり濡れたので、webpackに移動する準備ができました。同じ靴で始める人には同じルートを勧めます。あなたがwebpackを試すことができないと言っているのではなく、それが複雑であると思われる場合は、最初にgulpから始めてください... gulpが不要な場合は、うんざりしますが、package.jsonでコマンドを指定し、最初に起動して実行するだけのタスクランナーなしでコマンドラインからそれらを呼び出すこともできます。例えば： "scripts": { "babel": "babel src -d build", "browserify": "browserify build/client/app.js -o dist/client/scripts/app.bundle.js", "build": "npm run clean && npm run babel && npm run prepare && npm run browserify", "clean": "rm -rf build && rm -rf dist", "copy:server": "cp build/server.js dist/server.js", "copy:index": "cp src/client/index.html dist/client/index.html", "copy": "npm …

161 node.js  webpack  gulp 

私はwebpackを使い始めたばかりですが、複数エントリポイントのサンプルを作成するのに苦労しています。この例のwebpack.config.jsファイルには、次の行が含まれています var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin"); エラーで失敗しました Error: Cannot find module '../../lib/optimize/CommonsChunkPlugin' 探し回って、CommonsChunkPluginを式で使用する他の例を見つけました var commonsPlugin = new webpack.optimize.CommonsChunkPlugin("common.js"); エラーで失敗する ReferenceError: webpack is not defined さらに検索すると、次のような多くの例が見つかりました var webpack = require('webpack'); そして今私のビルドは失敗します Error: Cannot find module 'webpack' どうすればいいのか途方に暮れている。

151 node.js  webpack 

私はcreate-react-appを使用しています。内のファイルからパブリックフォルダーの画像を呼び出そうとしていますsrc/components。このエラーメッセージが表示されます。 ./src/components/website_index.jsモジュールが見つかりません：プロジェクトのsrc /ディレクトリの外にある../../public/images/logo/WC-BlackonWhite.jpgをインポートしようとしました。src /以外の相対インポートはサポートされていません。src /内に移動するか、プロジェクトのnode_modules /からシンボリックリンクを追加できます。 import logo from '../../public/images/logo_2016.png'; <img className="Header-logo" src={logo} alt="Logo" /> パスへのインポートを実行できると多くのことを読みましたが、それでもまだ機能しません。どんな助けでも大歓迎です。このような質問がたくさんあることは知っていますが、ロゴや画像をインポートするように言われているので、全体像で何かが欠けています。

149 javascript  reactjs  webpack  create-react-app 

Reactルーターを使用すると、reactアプリで処理できます/arbitrary/route。これを機能させるには、一致するルートでReactアプリを送信するサーバーが必要です。 しかし、webpack開発サーバーは任意のエンドポイントを処理しません。 追加の高速サーバーを使用するソリューションがあります。 webpack-dev-serverがreact-routerからのエントリポイントを許可できるようにする方法 しかし、ルートマッチングを可能にするために別のExpressサーバーを起動したくありません。Webpack開発サーバーに任意のURLに一致するように伝え、反応アプリを送信したいだけです。お願いします。

148 reactjs  ecmascript-6  webpack  react-router 

Webパックを使用して、reactjsプロジェクトを管理しています。webpackでJavaScriptで画像をロードしたいfile-loader。以下はwebpack.config.jsです： const webpack = require('webpack'); const path = require('path'); const NpmInstallPlugin = require('npm-install-webpack-plugin'); const PATHS = { react: path.join(__dirname, 'node_modules/react/dist/react.min.js'), app: path.join(__dirname, 'src'), build: path.join(__dirname, './dist') }; module.exports = { entry: { jsx: './app/index.jsx', }, output: { path: PATHS.build, filename: 'app.bundle.js', }, watch: true, devtool: 'eval-source-map', relativeUrls: true, resolve: { …

141 javascript  reactjs  webpack