Webpack配置（靜態文件）

Question

我想配置一個項目的構建結構，並希望通過webpack做到這一切。我的項目包括打字稿（對於這個問題並不重要），生CSS，HTML模板（角）和一個index.html的

該項目目前的結構是：

- 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 

所需的輸出將是（下DIST）

- 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 

我一直在使用raw-loader和file-loader無濟於事移動HTML文件嘗試。

我很滿意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，只需要模板並將其作爲字符串內聯。