Cấu hình Webpack (các tệp tĩnh)

Question

Tôi đang cố định cấu hình cấu trúc xây dựng của dự án và muốn thực hiện tất cả thông qua webpack. Dự án của tôi bao gồm nguyên cảo (không quan trọng cho câu hỏi này), CSS liệu, mẫu HTML (góc) và một index.html

Cấu trúc hiện tại của dự án là:

- 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 

Kết quả mong muốn sẽ là (theo quận)

- 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 

tôi đã cố gắng sử dụng raw-loader và file-loader vô ích để di chuyển các tập tin html.

Tôi hài lòng với cách gói webpack lên các tệp ts/js, nhưng không thể tìm ra cách di chuyển các tệp tĩnh (html/css). Dưới đây là những gì tôi có cho đến nay.

// 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]' } 
    ] 
    } 
}; 

LƯU Ý: Tôi biết rằng tôi không biết nhiều về webpack và cách tiếp cận mà tôi đang tìm kiếm có thể không phải là tuyến đường được đề xuất, vì vậy tôi mở để cải thiện toàn bộ cấu trúc.

Answer 1

Nếu bạn có quyền truy cập vào my egghead series, tôi khuyên bạn nên xem requiring templates.

Nếu không, hãy xem this directive. Không cần nhiều hơn cho templateUrl, chỉ cần yêu cầu mẫu và được inline dưới dạng chuỗi.