Question

具有以下内容（改编自OReilly的模块和资产捆绑与webpack http://my.safaribooksonline.com/video/web-development/9781771375887）

const viewout = document.querySelector(".view");
const view = require('raw!jade-html?pretty=false!../views/index.jade');

viewout.innerHTML = view;

哪个有效，但我想在我的webpack配置中使用jade。所以我尝试将以下内容添加到我的加载器数组中：

{
      test: /\.jade$/,
      include: [
        Path.resolve(process.cwd(), 'client/views')
      ],
      loader: 'raw!jade-html?pretty=false!'
}

然后我将应用代码中的require语句更改为

const view = require('../views/index.jade');

给了我错误

ERROR in ./client/views/index.jade
Module parse failed:

所以，重申一下 - 加载器解析并使用原始的require语句运行正常，但是当我将其设置为配置设置时它不起作用 - 我做错了什么？

Answer 1

这是我用来转换内联加载器需要语法的O'Reilly示例的webpack.config.js。

const Path = require('path');

const config = {
  entry: {
    app: ['babel-polyfill','./client/js/app']
  },
  output: {
    path: './build',
    filename: '[name]-bundle.js'
  },
  devtool: 'source-map',
  module: {
    loaders:[{
      test: /\.js$/,
      include: [
        Path.resolve(process.cwd(), 'client/js')
      ],
      loader: 'babel',
      query: {
        presets: ['es2015']
      }
    },
    {
      test: /\.jade$/,
      include: [
        Path.resolve(process.cwd(), 'client/views')
      ],
      loaders: ['raw', 'jade-html?pretty=true']
    }]
  },
  resolve: {
    extension: ['', '.js'],
    modulesDirectories: ['node_modules']
  }
};

module.exports = config;

为什么我的玉器webpack加载器不工作？

1 个答案: