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

实际上你不需要指定节点模块路径。如果您只指定实际加载器的名称，则可以使用，如下所示

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

Answer 2

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

npm i raw-loader

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

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

检查此问题：Webpack loader aliases?

Answer 3

与Webpack 2.2一起使用的类似解决方案：

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

并安装text-loader：

npm install text-loader

在Webpack中使用RequireJS文本插件

3 个答案: