Блог

У меня есть проект, использующий ractivejs с webpack. Я добавил ractive-loader, который можно найти здесьhttps://www.npmjs.com/package/ractive-loader

Когда я пытаюсь собрать проект с помощью npm run build:dev, я получаю следующее сообщение об ошибке в шаблоне:

 `ERROR in ./src/Templates/Feed/Main.html 1:2
Module parse failed: Unexpected character '#' (1:2)
You may need an appropriate loader to handle this file type.
> {{#Feeds}}
| {{title}}
| {{/Feeds}}`
  

Шаблон: Main.html

 `{{#Feeds}}

<h1>{{title}}</h1>

{{/Feeds}}`
  

Мой веб-пакет выглядит следующим образом:

webpack.config

 `const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const {
  prod_Path,
  src_Path
} = require('./path');
const {
  selectedPreprocessor
} = require('./loader');

module.exports = {
  entry: {
    main: './'   src_Path   '/main.js'
  },
  output: {
    path: path.resolve(__dirname, prod_Path),
    filename: '[name].[chunkhash].js'
  },
  devtool: 'source-map',
  devServer: {
    open: true,
  },
  module: {
    rules: [{        
      test: /.html$/,
      use: {
        loader: 'ractive-loader'
      },
      test: selectedPreprocessor.fileRegexp,
      use: [{
        loader: MiniCssExtractPlugin.loader,
      },
      {
        loader: 'css-loader',
        options: {
          modules: false,
          sourceMap: true
        }
      },
      {
        loader: 'postcss-loader',
        options: {
          sourceMap: true
        }
      },
      {
        loader: selectedPreprocessor.loaderName,
        options: {
          sourceMap: true
        },
      }
      ]
    }]

  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.css',
    }),
    new HtmlWebpackPlugin({
      inject: false,
      hash: false,
      template: './'   src_Path   '/index.html',
      filename: 'index.html'
    })
  ],

  resolve: {
    alias: {
      pubsub: 'aurelia-event-aggregator',
      Ractive: 'ractive'
    }
  }
};`
  

Package.json

 `{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "build:dev": "webpack-dev-server --env dev --mode none",
    "build:prod": "webpack --env prod --mode production",
    "build:watch": "webpack-dev-server --env dev --mode none"
  },
  "author": "mwieth",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^8.6.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.0",
    "node-sass": "^4.11.0",
    "postcss-loader": "^2.1.5",
    "sass-loader": "^7.0.2",
    "style-loader": "^0.21.0",
    "webpack": "^4.10.2",
    "webpack-cli": "^3.0.1",
    "webpack-dev-server": "^3.1.14",
    "webpack-md5-hash": "0.0.6",
    "ractive": "^1.3.2",
    "ractive-animatecss": "^0.1.0",
    "ractive-datetime": "^1.0.0",
    "ractive-loader": "^0.5.6",
    "ractive-markdown": "^0.1.1",
    "ractive-route": "github:martinkolarik/ractive-route",
    "aurelia-event-aggregator": "^1.0.2",
    "axios": "^0.18.0"
  },
  "dependencies": {
    "acorn": "^6.1.1",
    "normalize.css": "^8.0.1"
  }
}`
  

просматривая документы здесь https://github.com/rstacruz/ractive-loader

синтаксис для добавления ractive-loader — это просто ‘ractive’ вместо ‘ractive-loader’

 use: {
  test: /.html$/,
  loader: 'ractive'
}
  

хотя кажется, что они делают это немного по-другому, если вы точно следуете их примеру

 module: {
    loaders: [
      { test: /.html$/, loader: 'ractive' }
    ]
  }