Webpack Config（静的ファイル）

Question

私はプロジェクトのビルド構造を設定しようとしており、webpack経由ですべてをやりたいと思っています。

- app 
-- components 
--- foo 
---- foo.html 
---- foo.css 
---- foo-ctrl.ts 
---- foo-directive.ts 
--- bar 
---- bar.html 
---- bar.css 
---- bar-ctrl.ts 
---- bar-directive.ts 
-- index.html 
-- site.css 
- dist 
- package.json 
- webpack.config.js 

所望の出力は次のようになります。私のプロジェクトは、プロジェクトの現在の構造がある活字体（この質問のために重要ではありません）、生のCSS、HTMLテンプレート（角度）とのindex.html

で構成されてい

- js 
-- bundle.js // or some other name 
- views 
-- foo.html // or foo/foo.html 
-- bar.html // or bar/bar.html 
- styles 
-- foo.css // or foo/foo.css 
-- bar.css // or bar/bar.css 
-- sites.css 
- index.html 

（distの下に）私は、htmlファイルを移動するために無駄にraw-loaderとfile-loaderを使用して試してみました。

webpackがts/jsファイルをどのようにバンドルしているのですが、静的ファイル（html/css）の移動方法を理解できません。以下はこれまで私が持っていたものです。

// webpack.config.js 
module.exports = { 
    entry: [ 
    './app/app.ts', 
    './app/index.html', 
    './app/foo/foo.html', 
    './app/bar/bar.html' 
    ], 
    output: { 
    path: './dist/', 
    filename: 'js/bundle.js' 
    }, 
    resolve: { 
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'] 
    }, 
    module: { 
    loaders: [ 
     { test: /\.ts$/, loader: 'ts-loader' }, 
     { test: /\index.html$/, loader: 'file-loader?name=[name].[ext]' }, 
     { test: /(?:[^index.html]*).html/, loader: 'file-loader?name=views/[name].[ext]' } 
    ] 
    } 
}; 

注：私はWebPACKのについて多くを知らないことを知っていると私は取るために探していますアプローチが提案された経路ではないかもしれないので、私は、全体の構造を刷新に開いています。

Answer 1

my egghead seriesにアクセスできる場合は、requiring templatesをご覧ください。

そうでない場合は、this directiveをチェックしてください。 templateUrlの必要はもうありません。テンプレートを必要とし、文字列としてインライン化します。