如何使用webpack编译角度模板? [英] How can you compile angular templates with webpack?

问题描述

想法是在所有html文件中包含1个JS文件. 并通过require来使用它之后:

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

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

请您分享一下您的经历吗? 我一直在搜寻它，发现了几个用于webpack的加载器，但不确定要使用什么.

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

推荐答案

我决定将ng-cache loader用于webpack以及ES2015语法:这表示import from而不是require.

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

我的webpack配置的一部分:

Part of my webpack config:

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;

这篇关于如何使用webpack编译角度模板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！