webpackで角度テンプレートをコンパイルするにはどうすればいいですか？

Question

アイデアは、すべてのHTMLファイルのうち1つのJSファイルを持つことです。 と直後経由して、それを使用することが必要です。

templateUrl: require('./views/user-list.html') 

あなたがしてください体験共有してもらえますか？ 私はそれについてグーグルであり、webpack用のいくつかのローダーを見つけましたが、何を使うべきかは不明です。

Answer 1

webpackにng-cacheローダーをES2015の構文と一緒に使用することにしました。つまり、requireの代わりにimport fromを意味します。私のWebPACKの設定の

パート：テンプレートと

module: { 
    loaders: [ 
     { test: /\.js$/, loader: 'babel', include: APP }, 
     { test: /\.html$/, loader: 'ng-cache?prefix=[dir]/[dir]' }, 
    ] 
    }, 

とディレクティブの例：

import avatarTemplate from './views/avatar.html'; 

const avatar = function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     user: '=' 
    }, 
    template: avatarTemplate 
    } 
}; 

export default avatar; 

Answer 2

あなたの答えは正しいです。 Webpack.configで

const avatar = function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     user: '=' 
    }, 
    template: require("../path/to/file.html"), 
    } 
}; 

export default avatar; 

Answer 3

ファイルあなたは がpackage.jsonで、HTMLローダーを含めるとで以下のメソッドを使用し、

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

]以下のようにメインのHTMLを追加することができます。しかし、ちょうどそれのための代替を提供しますconfigブロックだけで十分です。だから、すべてのパーシャルがbundle.jsにバンドルされます

$stateProvider.state('app', { 
     url: '/app', 
     template: require('html-loader!root/app/Common/templates/role.html'), 
     controller: 'roleController' 
    }) 

itself.NoのWebPACK-config設定でローダーを追加する必要があるだけでなく