如何使用webpack编译角度模板？

The idea is to have 1 JS file out of all html files. and after just to use it via require:

我们的想法是从所有html文件中获取1个JS文件。之后通过require使用它：

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

Could you share you experience please? I was googling for it and found several loaders for webpack but not sure what to use.

你能分享一下你的体验吗？我正在谷歌搜索它，发现几个装载webpack但不知道该使用什么。

3 个解决方案

#1

I decided to use ng-cache loader for webpack together with ES2015 syntax: it means import from instead of require.

我决定将web-pack的ng-cache loader与ES2015语法一起使用：它意味着从而不是require导入。

Part of my webpack config:

我的webpack配置的一部分：

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

and example of directive with template:

以及带模板的指令示例：

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

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

export default avatar;

#2

your answer is right. However just offering alternative for it:

你的答案是对的。然而，只是为它提供替代方案：

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

export default avatar;

#3

In Webpack.config file you can add main html like below

在Webpack.config文件中，您可以添加如下的主html

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

], Include html-loader in package.json and use the below method in config block alone is enough.

]，在package.json中包含html-loader并在config block中单独使用下面的方法就足够了。

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

So all the partials will be bundled within the bundle.js itself.No need to add the loaders in webpack-config as well

因此所有部分都将捆绑在bundle.js本身中。不需要在webpack-config中添加加载器

#1