Как создать HTML в приложении Backbone с помощью Webpack

Question

Я пытаюсь использовать Webpack в небольшом приложении TODO, и ему не удается разрешить HTML-шаблон для файла JS точки входа.

Я попытался запустить приложение Backbone, как оно есть, и оно работает нормально, так что я думаю, это потому, что оно включено в мой файл JS точки входа, а Webpack не знает, как с ним работать.

package.json

{
    "name": "backbone_webpack_demo",
    "version": "1.0.0",
    "scripts": {},
    "license": "ISC",
    "dependencies": {},
    "devDependencies": {
        "backbone": "^0.9.9",
        "express": "^4.16.4",
        "jquery": "^1.7.1",
        "underscore": "^1.2.2",
        "webpack": "^4.28.4"
      }
    }

webpack.config.js

var webpack = require('webpack');

    module.exports = {
      entry: ["./js/views/todo.js"],
      mode: 'development',
      output: {
        filename: "bundle.js"
      },
      plugins : [ new webpack.ProvidePlugin({
          $ : "jquery",
          Backbone : "backbone",
          _ : "underscore"
      }) ]
    }

todo.js

define(['text!templates/todos.html'], function(todosTemplate){
    var TodoView = Backbone.View.extend({

    //... is a list tag.
    tagName:  'li',

    // Cache the template function for a single item.
    template: _.template(todosTemplate),

Показанная ошибка:

Hash: 682462a622281f1ff942
    Version: webpack 4.28.4
    Time: 1342ms
    Built at: 01/14/2019 12:48:05 PM
     1 asset
    Entrypoint main = bundle.js
    [1] multi ./js/views/todo.js 28 bytes {0} [built]
    [2] ./js/views/todo.js 2.39 KiB {0} [built]
    [4] (webpack)/buildin/global.js 472 bytes {0} [built]
    [5] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 2 hidden modules

    ERROR in ./js/views/todo.js
    Module not found: Error: Can't resolve 'templates/todos.html' in '/home/steve/backbone-fundamentals/practicals/modular-todo-app/js/views'
     @ ./js/views/todo.js 1:0-82:2
     @ multi ./js/views/todo.js

Код прекрасно работает как автономное приложение Backbone, не использующее Webpack

Answer 1

На основании этого старого обсуждения на github

webpack.config.js

resolveLoader: {
  alias: {
      text: 'text-loader'
  }
}

Также понадобится текстовый загрузчик .

Возможно, вам придется внести изменения в соответствии с версией вашего веб-пакета.