Webpack - 画像ファイルをコピーする

Question

私は現在Webpackを使ってAngular2アプリケーションをパックしていますが、私は問題に直面しています。

私はいくつかのドキュメントを読んだことがありますが、ファイルローダーを使用して出力ディレクトリにいくつかのファイルをコピーする方法を達成できません。ここで

は私の現在のファイル階層です：

config 
    | - webpack.common.js 
app   
    |- static 
     | - css 
      | - ... 
     | - fonts 
      | - ... 
     | - img 
      | - someimage.png 
      | - anotherimage.png 
    |- main.ts 

と（フル）webpack.common.js：

var path = require("path") 
var webpack = require("webpack") 
var ExtractTextPlugin = require("extract-text-webpack-plugin") 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = {  
    entry: { 
     app: './app/main.ts', 
    }, 
    output: { 
     filename: 'js/[name].js', 
     path:'./built', 
     chunkFilename: 'bundles/[id].chunk.js' 
    }, 


    module: { 
     loaders: [ 
     { 
      test: /\.ts$/, 
      loader: 'ts', 
      exclude:'./out/' 
     }, 
     {   
      test: /\.(jpe?g|png|gif|svg)$/i, 
      include: [ 
       path.resolve(__dirname, '/app/static/img/'), 
       ], 
      loader: 'file?name=[path][name].[ext]&context=./src', 

     } 
     ] 
    }, 

    resolve: { 
     extensions: ['', '.js', '.ts', '.gif'] 
    }, 


    plugins: [ 
     new HtmlWebpackPlugin({ 
      template: './index.html' 
     }) 
    ] 
} 

を、私はコマンドをプレイWebPACKのを実行するには：

webpack --config Config/webpack.common.js --bail 

tsファイルは正しくjavascriptに書き込まれ、出力ディレクトリにコピーされます。また、index.htmlファイルもprです私のイメージファイルはありません。

私の設定ファイルに何か問題があると思いますが、何も見えません。私は何時間も前に頭を叩いていますので、どんな助けでも大歓迎です。

ありがとうございました

Answer 1

イメージを読み込むには、url-loaderを使用する必要があります。サンプルコードを以下に示します。

{ 
    module: { 
    loaders: [ 
     { test: /\.(jpe?g|png|gif|svg)$/i, loader: 'url?limit=10000!img?progressive=true' } 
    ] 
    } 
} 

エントリjsファイル内のgifファイルまたは対応するcss/sassファイルを参照していますか。

entry: { 
     app: './app/main.ts', 
    } 

Webpackは、エントリポイントに参照を持つすべてのファイルを読み込みます。すべてのファイルが1つのエントリポイントにない場合。次に、以下に示すように複数のエントリポイントを追加できます。

entry: { 
     app: './app/main.ts', 
     image: './app/something.ts' 
    } 

また、私は生態系全体にアクセスしやすいように、webpack.config.jsファイルを直接ルートディレクトリに配置します。 configフォルダからrootフォルダに移動してみてください。

Answer 2

プロジェクトのCSS部分をどのように構築するかに応じて、イメージのエントリポイントを別々に作成すると、必要なものが得られない場合があります。代わりに、copy-webpack-pluginまたはgrunt/gulpタスクを使用して静的ファイルをコピーすることもできます。