Webpack：使用 jade-loader 构建模块失败

Question

这可能是一个配置问题，但我是 Webpack 的新手，几天后还没弄明白。我会很感激一些帮助！

包

网络包 1.9.8
jade-loader 0.7.1
玉 1.9.2

webpack.config.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
  // ...
  resolve: {
    extensions: ["", ".webpack.js", ".web.js", ".json", ".js", ".jade" ],
    root: [ path.join(__dirname, 'src/js'), path.join(__dirname, 'node_modules') ],
    modulesDirectories: ['node_modules'],
  },
  module: {
    loaders: [
      { test: /\.json$/, loader: "json-loader" },
      { test: /modernizr/, loader: "imports?this=>window!exports?window.Modernizr" },
      { text: /\.jade$/, loader: "jade-loader" }
    ]
  }
  // ...
};

使用完全空的入口文件，尝试运行 webpack 时出现以下错误。

ERROR in ./~/jade/lib/runtime.js
Module build failed: Error: unexpected token "indent"
    at MyParser.Parser.parseExpr (/Users/name/project/code/assets/node_modules/jade/lib/parser.js:252:15)
    at MyParser.Parser.parse (/Users/name/project/code/assets/node_modules/jade/lib/parser.js:122:25)
    at parse (/Users/name/project/code/assets/node_modules/jade/lib/index.js:104:21)
    at Object.exports.compileClientWithDependenciesTracked (/Users/name/project/code/assets/node_modules/jade/lib/index.js:256:16)
    at Object.exports.compileClient (/Users/name/project/code/assets/node_modules/jade/lib/index.js:289:18)
    at run (/Users/name/project/code/assets/node_modules/jade-loader/index.js:170:24)
    at Object.module.exports (/Users/name/project/code/assets/node_modules/jade-loader/index.js:167:2)
 @ ./entry.js 1:11-85

如果我确实需要 entry.js 内的 jade 文件，我会得到一个不同的错误：

ERROR in ./entry.js
Module build failed: Error: unexpected text ;
var
    at Object.Lexer.fail (/Users/name/project/code/assets/node_modules/jade/lib/lexer.js:871:11)
    at Object.Lexer.next (/Users/name/project/code/assets/node_modules/jade/lib/lexer.js:930:15)
    at Object.Lexer.lookahead (/Users/name/project/code/assets/node_modules/jade/lib/lexer.js:113:46)
    at MyParser.Parser.lookahead (/Users/name/project/code/assets/node_modules/jade/lib/parser.js:102:23)
    at MyParser.Parser.peek (/Users/name/project/code/assets/node_modules/jade/lib/parser.js:79:17)
    at MyParser.Parser.tag (/Users/name/project/code/assets/node_modules/jade/lib/parser.js:752:22)
    at MyParser.Parser.parseTag (/Users/name/project/code/assets/node_modules/jade/lib/parser.js:738:17)
    at MyParser.Parser.parseExpr (/Users/name/project/code/assets/node_modules/jade/lib/parser.js:211:21)
    at MyParser.Parser.parse (/Users/name/project/code/assets/node_modules/jade/lib/parser.js:122:25)
    at parse (/Users/name/project/code/assets/node_modules/jade/lib/index.js:104:21)

但是，如果我在 webpack.config.js 中注释掉 jade 加载程序行并使用内联语法 require('jade!template.jade') 请求 jade 文件——一切正常。

知道发生了什么事吗？

Answer 1

您的 webpack 配置包含拼写错误。

  { text: /\.jade$/, loader: "jade-loader" }

应该是

  { test: /\.jade$/, loader: "jade-loader" }
      ^ x -> s

Webpack：使用 jade-loader 构建模块失败

Webpack: Module build failed with jade-loader

webpack