Question

我有一个使用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看起来像这样：

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"
  }
}`

Answer 1

通过查看此处的文档 https://github.com/rstacruz/ractive-loader

添加ractive-loader的语法只是“ ractive”，而不是“ ractive-loader”

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

如果您完全按照他们的示例，似乎他们的做法会有所不同

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

Webpack无法识别Ractive-loader

1 个答案: