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

【问题标题】：Using a text loader in Webpack for RequireJS text plugin在 Webpack 中为 RequireJS 文本插件使用文本加载器
【发布时间】：2023-04-09 17:34:01
【问题描述】：

所以我的 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" }
]

谢谢

【问题讨论】：

标签： angularjs requirejs webpack

【解决方案1】：

其实你不需要指定节点模块路径。如果您只指定实际加载程序的名称，则它可以工作，如下所示

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

【讨论】：

Webpack 不再支持答案的语法 - 这个解决方案对我有用
在 Webpack 版本 3+ 中为我工作。谢谢！

【解决方案2】：

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

npm i raw-loader

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

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

检查这个 SO 问题：Webpack loader aliases?

【讨论】：

【解决方案3】：

使用 Webpack 2.2 对我有用的类似解决方案：

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

并安装文本加载器：

npm install text-loader

【讨论】：