webpack - 如何使用 webpack 从 pug 模板输出 html 文件？

Question

我正在尝试从我的 webpack 项目中的 pug 模板输出单独的 html 文件。我遇到的问题是让 pug-loader 将 html 渲染到文件中。

我的 webpack.config:

const path = require('path');
const glob = require('glob');
const webpack = require('webpack');

const src = path.resolve(__dirname, 'src');
const dist = path.resolve(__dirname, 'dist');

module.exports = {
  context: src,

  entry: {
    pug: glob.sync('./**/*.pug', {
      cwd: src
    }),
    index: path.resolve(src, 'index.js')
  },

  output: {
    path: dist,
    filename: '[name].js'
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015'].map(dep =>
              require.resolve(`babel-preset-${dep}`)
            ) // Fix for lerna symlinked deps
          }
        }
      },
      {
        test: /\.pug$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].html'
            }
          },
          'extract-loader',
          'html-loader',
          'apply-loader',
          'pug-loader'
        ]
      }
    ]
  }
};

这会为我的项目中的每个 pug 模板正确生成文件，但这些文件不包含 html。相反，每个文件看起来都是这样的:

var req = require("!!<absolute-path-to-project>/node_modules/pug-loader/index.js!<absolute-path-to-pug-file>/index.pug");
module.exports = (req['default'] || req).apply(req, [])

我安装的依赖版本:

{
  "apply-loader": "^2.0.0",
  "babel-core": "^6.25.0",
  "babel-loader": "^7.1.0",
  "babel-preset-es2015": "^6.24.1",
  "extract-loader": "^0.1.0",
  "file-loader": "^0.11.1",
  "glob": "^7.1.2",
  "html-loader": "^0.4.5",
  "pug-loader": "^2.3.0",
  "webpack": "^3.0.0"
}

Answer 1

尝试使用 pug-html-loader 而不是 pug-loader。

这里是一个例子:

{
    test: /\.pug$/,
    use: [
      "file-loader?name=[path][name].html",
      "extract-loader",
      "html-loader",
      "pug-html-loader"
    ]
  }