Question

我正在尝试使用angularjs，ruby和webpack开发一个todo应用程序。在工作时，我尝试将html文件导入到我的组件中，但一直出现此错误。

Uncaught Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <main>
|   <div class="header">Get Your Shit Done</div>
|   <div class="todo-wrapper">
    at Object../app/javascript/packs/todo.html (todo.controller.js:44)
    at __webpack_require__ (bootstrap:19)
    at Module../app/javascript/packs/todo.component.js (todo.component.js:8)
    at __webpack_require__ (bootstrap:19)
    at Module../app/javascript/packs/application.js (application.js:1)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:8`
    at bootstrap:83

经过进一步调查，我意识到我需要一个用于webpack的html加载器，以便它可以处理html文件。因此，我添加了“ htmlloader”：“ ^ 0.5.5” 和“ html-webpack-plugin”：“ ^ 3.2.0” 。并如下所示配置了我的webpack.config.js文件，但仍然收到相同的错误：/。有什么建议吗？

webpack.config.js：

var path    = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'source-map',
  entry: {},
  module: {
    loaders: [
       { test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate!babel' },
       { test: /\.html$/, loader: 'raw' },
       { test: /\.(scss|sass)$/, loader: 'style!css!sass' },
       { test: /\.css$/, loader: 'style!css' }
    ]
  },
  plugins: [
    // Injects bundles in your index.html instead of wiring all manually.
    // It also adds hash to all injected assets so we don't have problems
    // with cache purging during deployment.
    new HtmlWebpackPlugin({
      template: 'app/views/layouts/application.html.erb',
      inject: 'body',
      hash: true
    }),

    // Automatically move all modules defined outside of application directory to vendor bundle.
    // If you are using more complicated project structure, consider to specify common chunks manually.
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        return module.resource && module.resource.indexOf(path.resolve(__dirname, 'client')) === -1;
      }
    })
  ]
};

app / views / layouts / application.html.erb：

<!DOCTYPE html>
<html>
  <head>
    <title>Todo</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all' %>
    <%= javascript_include_tag 'application' %>
    <%= javascript_pack_tag 'application' %>
  </head>

  <body ng-app="todo">
    <%= yield %>
  </body>
</html>

app / views / application / todo_home.html

<ui-view ng-view></ui-view>

package.json：

{
  "name": "todo",
  "private": true,
  "dependencies": {
    "@babel/core": "^7.4.0",
    "@babel/plugin-transform-runtime": "^7.4.0",
    "@babel/polyfill": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@babel/runtime": "^7.4.2",
    "@rails/webpacker": "^4.0.2",
    "@uirouter/angularjs": "^1.0.22",
    "angular": "^1.7.8",
    "babel-loader": "^8.0.5",
    "bootstrap": "^4.3.1",
    "core-js": "^3.0.0",
    "font-awesome": "^4.7.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "3",
    "popper.js": "^1.14.7",
    "rxjs": "^6.4.0",
    "ts-loader": "^5.3.3",
    "typescript": "^3.3.4000",
    "webpack": "^4.29.6",
    "webpack-bundle-analyzer": "^3.1.0",
    "webpack-cli": "^3.3.0",
    "zone.js": "^0.9.0"
  },
  "devDependencies": {
    "webpack": "^4.29.6",
    "webpack-dev-server": "^3.2.1"
  },
  "description": "This README would normally document whatever steps are necessary to get the application up and running.",
  "version": "1.0.0",
  "main": "babel.config.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Dylan-Jannetty/todo.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/Dylan-Jannetty/todo/issues"
  },
  "homepage": "https://github.com/Dylan-Jannetty/todo#readme"
}

app / javascripts / packs / todo.html：

import TodoController from './todo.controller';
import template from './todo.html';
import './todo.scss';

const TodoComponent = {
  controller: TodoController,
  controllerAs: 'todo',
  template

}

export default TodoComponent;

app / javascripts / todo.html：

<main>
  <div class="header">Get Your Shit Done</div>
  <div class="todo-wrapper">
    <h2><span class="emphasis" ng-bind="todo.getTotalTodos()"></span> Things To Do</h2>
    <form>
      <input class="add-input" placeholder="I need to..." type="text" ng-model="todo.formTodoText" ng-model-instant />
      <i class="fa fa-check" aria-hidden="true"ng-click="todo.addTodo()" ng-if="todo.formTodoText"></i>
    </form>
    <ul>
      <li class="task-list" ng-repeat="task in todo.todos">
        <div class="task"> 
          <div class="task-text" ng-bind="task.text" ng-model="todo.editableText"></div>
          <span class="options">
            <a href="#" ng-click="boxShow=!boxShow">
              <button class="fa fa-info-circle" aria-hidden="true">I</button>
            </a>

            <button class="fa fa-pencil" ng-click="todo.enableEditor(task)">EDIT</button>
            <span class="x" ng-click="todo.deleteItem(task)"><i class="fa fa-ban" aria-hidden="true"></i></span>
          </span>
          <div ng-show="boxShow">
            <textarea rows="4" cols="40" placeholder="Write notes of your task here.."></textarea>
            <a href="#" ng-click="boxShow=!boxShow">Close</a>
          </div>
        </div>
      </li>
    </ul>
    <div ng-if="todo.todos.length == 0" class="empty-message">
      <h3>You Probably Have Some Stuff To Do..</h3>
      <img class="empty-img" ng-src="http://cdn.firstwefeast.com/assets/2015/03/kermit-meme-112414png_1qq16n1pph2ky139ki81oqxxiw.png" alt="">
    </div>
  </div>
</main>

更新

我找到了此链接，我按照步骤进行操作，它消除了错误！ https://github.com/rails/webpacker/blob/master/docs/typescript.md#html-templates-with-typescript-and-angular。

为什么我的webpack-html-loader无法加载我的html文件？

0 个答案: