angularjs new 你怎麼能用webpack編譯角模板?




ng gs (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'
    })

所以所有的partials都會被捆綁在bundle.js中。不需要在webpack-config中添加loader

這個想法是所有的HTML文件中有1個JS文件。 並通過後,只需要使用它:

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

你能分享你的經驗嗎? 我googling它,並發現了幾個裝載機的webpack,但不知道要使用什麼。


你的回答是對的。 但只是提供替代方案:

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

export default avatar;

我決定把webpack的ng-cache loader與ES2015語法一起使用:它意味著import from不是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;




webpack