WebPACKをコピーしない画像

Question

は、私はすでにWebPACKのにバンドルローカルパッケージをインポートしようとしています。私はアプリを構築する場合、すべてがWebPACKのその内部のパッケージからの画像、フォントなどをコピーしていない以外、よさそうです。何が間違っているのでしょうか？

私は私のカスタムライブラリを参照しようとすると、それはすでにバンドルされている：

- dist 
-- asdfjlsjdflasdjflsdaf.ttf 
-- sdjflsjdfasjdflsjdfsd.eot 
-- mylibrary.js 

のみmylibrary.jsがコピーされます。だから、親アプリは次のようになります。

- dist 
-- mylibrary.js 
-- parentapp.js 
- packages 
-- mylibrary 
--- src... 
--- dist... 

問題を解決することができます。 をbase64に変換し、mylibrary.jsに含まローダ制限と、すべてを増加させることにより

1. は私の親のアプリ
で利用可能です
2. コピープラグインはmylibraryからフォントをコピーしますが、mylibraryを使用するすべての人がフォント、画像などのコピーを気にする必要があるので、この解決策は醜いです。

Answer 1

GlobCopyWebpackPluginの使用であろうWebPACKのを使用して画像やフォントをコピーするための回避策。それが動作（私はあなたの現在のWebPACKの構成がどのように見えるか、かなりわかりません）が、白紙の状態で行くと、これはあなたを助けるかもしれないかどうかを確認let`s方法

。ですから、異なる環境のWebpackファイルを別々に保管することができます。あなたがwebpack.config.dev.jsを作成したら、「プラグイン」プロパティの内側にあなたはGlobCopyWebpackPluginを使用することができます。 「資産」とは、あなたが

フォント、アイコン、マルチメディアなどを保持している。そして、あなたがpackage.json

"scripts": { 
    "serve": "npm run -s generatelocalefiles && node --max_old_space_size=4096 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config webpack.config.dev.js --port=4300", 
    } 

内のタスクを設定することができますフォルダです

new GlobCopyWebpackPlugin({ 
     "patterns": [ 
      "Assets" 
     ], 
     "globOptions": { 
      "cwd": path.join(process.cwd(), "src"), 
      "dot": true, 
      "ignore": "**/.gitkeep" 
     } 
    }), 

：それは以下のようになります。

とフォルダ構造は次のようになります

-src 
    -app 
    -assets 
-package.json 
-webpack.config.dev.js 
-webpack.config.prod.js 

（念のためにあなたが思っています） お役に立てれば！

Answer 2

理解するための最良の方法は、WebPACKのは、画像の世話をする方法を確認することで、フォントなど

Hereブートストラップ使用して、アクションで必要な概念を持っているモジュールです。

index.htmlは、ブートストラップスタイルとグリフも使​​用します。グリフ（およびすべてのブートストラップ）は、ブートストラップバイナリから1つのイメージを使用します。

モジュールをビルドしたら、元のブートストラップバイナリ（つまりnode_modules/bootstrap/dist/css/bootstrap.css）とバンドルされた出力ファイル（つまりdist/bundle.js）の画像のパスを比較できます。これらのファイルでglyphicons-halflings-regular.svgを検索することができます。あなたの構成された（ローダーの設定で）出力フォルダへ

のWebPACK単に

1. コピー画像/フォント
2. アップデートバンドルされた出力ファイルにそれらのリソースパス（すなわち、JS、CSSなど）

（1）は、上記のローダを使用して設定する必要があります。 webpack configのmodule.rulesが画像/フォントに対して適切に動作している場合、（2）は自動的にwebpackによって注意が払われます。

希望は少し物事を明確にします。