2016-04-06 5 views
2

私がやっていることは、角度1.xのディレクティブなどに必要な部分的なHTMLテンプレートをすべてコピーするようにwebpackを設定することです。別のフォルダ(ファイルローダがcssから参照されるアセットの場合と同じように)。私は部分的なhtmlをjavascriptバンドルに含めるのではなく、ハッシュ名を持つ1つのフォルダにそれらのすべてを含めることを望んでいます。Webpack anglejsはangularjsテンプレートをコピーしますが、javascriptバンドルには含まれません

私はファイルローダーを設定しようとしましたが、watchモードでwebpackを実行すると、distフォルダ内のHTMLもコピーされて新しいハッシュが追加され、基本的に無限ループが作成されますそのフォルダにコピーされて表示され、新しいhtmlが何度も表示されます。私はexcludeそのローダーのパターンに一致するように設定しようとしましたが、webpackはまだそのフォルダーを見続けていました。ここで

webpack.config.jsファイルの抜粋です。

module: { 
    loaders: [ 
     test: /\.html$/, 
     exclude: /bundle\/templates/, 
     loader: `file-loader?name=bundle/templates/[name]-[hash].[ext] 
    ] 
} 

私はハックに頼ることなく、私がやりたいことに役立つだろうローダーはありますか?

答えて

1

私は答えを見つけました。問題はexcludeがなくても正しく設定されたfile-loaderではありませんでした。無限ループを引き起こしたのは、コピーされたアセットと一致する正規表現を作成する動的要求でした...だから、この動的に適切なコンテキストを設定することによって、問題は解決されました。

+0

から参照されます、あなたはあなたのソリューションを共有できます?それは将来の他の人には役に立ちます:) –

1
In the webpack.config file you can use the same way like this in the loader section. 

    { 
     test: /\.html$/, 
     exclude: path.resolve(__dirname, 'index.html'), 
     loader: 'file-loader', 
     options: { 
      name: '[name].[ext]', 
      outputPath: 'views/' 
     } 
    }, 

そしてwebpack.configファイルのプラグインセクションで

plugins: [ 
    new HtmlWebpackPlugin({ 
     template: 'index.html', 
     inject: true 
    }), 
    new ExtractTextPlugin('bundle.css') 
] 

これは、すべてのHTMLSをコピーし、index.htmlを

関連する問題