Используя текстовый загрузчик в Webpack для RequireJS текста плагин

Question

Так что мой AngularJS код выглядит следующим образом:

define(['angular', 'text!./template.html'], function (angular, template) { 
'use strict'; 

return angular.module('app.widget', []) 
    .directive('MyWidget', function(){ 
     //.... use the template here 
}) 

Я использую текстовый плагин для RequireJS, чтобы получить шаблон HTML и использовать в в директиве AngularJS. Я хочу использовать webpack, и он читает код стиля AMD в порядке, но он не может работать с текстовым плагином.

Кто-нибудь знает, как заставить текстовый загрузчик для webpack работать с requirejs? Есть some solutions out there и discussion thread, но я не могу заставить их работать.

В моем webpack.config.js я получил

loaders: [ 
    { test: /^text\!/, loader: "text" } 
] 

Благодарности

Answer 1

Вам необходимо установить raw-loader, который является эквивалентом WebPack для загрузки файлов необработанных

npm i raw-loader 

Тогда вам необходимо выполнить псевдоним стиля requireJS с помощью raw-loader (resolveLoader должен быть помещен в корень объекта конфигурации webpack)

resolveLoader: { 
    alias: { 
     'text': { 
       test: /\.html$/, 
       loader: "raw-loader" 
      }, 
    } 
} 

Проверьте этот SO вопрос: Webpack loader aliases?

Answer 2

Аналогичное решение, которое работало на меня с Webpack 2.2:

resolveLoader: { 
    alias: { 
     // Support for require('text!file.json'). 
     'text': 'full/path/to/node_modules/text-loader' 
    } 
} 

и установить текстовый-погрузчик:

npm install text-loader 

Answer 3

На самом деле вы не нужно указывать путь модулей узлов. Он работает, если вы укажете только имя фактического загрузчика, например, ниже

resolveLoader: { 
     alias: { "text": "text-loader" } 
    },