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

Я пытаюсь использовать 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.

webpack backbone.js

14.01.2019 21:30

Поиск всех неиспользуемых файлов в проекте

Количество файлов в проекте растет по мере его развития. И если быть по-настоящему честным, их продвижение происходит в геометрической прогрессии...

Настройка шаблона Metronic с помощью Webpack и Gulp

Я пишу эту статью, чтобы поделиться тем, как настроить макет Metronic с помощью Sass, поскольку Metronic предоставляет так много документации, и они...

383

Ответы 1

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

webpack.config.js

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

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

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

Привет. Я пробовал это. Я установил text-loader -> npm i text-loader —save-dev, обновил web pack.config.js и повторно запустил команду webpack, но все еще получаю -> ERROR в ./js/views/todo.js Модуль не найден: Ошибка: не удается разрешить 'templates / todos.html' в '/ home / Steve / backbone-фундаментальные / практические / modular-todo-a‌ pp / js / views' @ ./js/views/todo.js 1: 0-82: 2 @ multi ./js/views/todo.js

— 16.01.2019 06:24

15.01.2019 14:01