在 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 一起工作？有 and a discussion thread，但我无法让它们工作。

在我的 webpack.config.js 我有

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

谢谢

Answer 1

您需要安装 raw-loader，这是加载原始文件的 webpack 等价物

npm i raw-loader

然后你需要使用 raw-loader 作为 requireJS 样式的别名（resolveLoader 将放在 webpack 配置对象的根目录中）

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

检查这个 SO 问题：

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" }
    },

在 Webpack 中为 RequireJS 文本插件使用文本加载器

Using a text loader in Webpack for RequireJS text plugin

requirejs

angularjs

webpack