Bạn có thể biên dịch các mẫu góc với webpack như thế nào?

Question

Ý tưởng là có 1 tệp JS ra khỏi tất cả các tệp html. và chỉ sau khi sử dụng thông qua yêu cầu:

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

Bạn có thể chia sẻ kinh nghiệm của mình không? Tôi đã googling cho nó và tìm thấy một số bộ tải cho webpack nhưng không chắc chắn những gì để sử dụng.

Answer 1

Tôi đã quyết định sử dụng bộ tải trình ng-cache cho webpack cùng với cú pháp ES2015: có nghĩa là import from thay vì require.

Một phần của cấu hình webpack của tôi:

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

và ví dụ về chỉ với mẫu:

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

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

export default avatar; 

Answer 2

câu trả lời của bạn là đúng. Tuy nhiên chỉ cung cấp thay thế cho nó:

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

export default avatar; 

Answer 3

Trong Webpack.config nộp bạn có thể thêm html chính như dưới đây

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

], Bao gồm html-loader trong package.json và sử dụng các phương pháp dưới đây trong khối cấu hình một mình là đủ.

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

Vì vậy, tất cả các partials sẽ được đóng gói trong bundle.js itself.No cần thêm các bộ tải trong webpack-config cũng