如何使用 webpack 编译 Angular 模板？答案

【问题标题】：How can you compile angular templates with webpack?如何使用 webpack 编译 Angular 模板？
【发布时间】：2016-01-20 23:40:33
【问题描述】：

我们的想法是在所有 html 文件中包含 1 个 JS 文件。然后通过 require 使用它：

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

你能分享你的经验吗？我在谷歌上搜索它并找到了几个用于 webpack 的加载器，但不知道该使用什么。

【问题讨论】：

标签： angularjs templates webpack

【解决方案1】：

我决定将 ng-cache loader 与 ES2015 语法一起用于 webpack：这意味着 import from 而不是 require。

我的 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;

【讨论】：

你能在前缀上只添加一个特定的文件夹吗？
在您看来这比使用 require 更好/更差？（好奇）

【解决方案2】：

你的答案是对的。但是只是提供替代方案：

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

export default avatar;

【讨论】：

在您看来这比使用 import 更好/更差？（好奇）

【解决方案3】：

在 Webpack.config 文件中，您可以像下面这样添加主 html

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

], 在 package.json 中包含 html-loader 并在 config 块中单独使用以下方法就足够了。

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

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

【讨论】：