Webpack 可以从 SCSS 和 Pug 构建多个 HTML 文件吗？

Question

我已经阅读了很多关于 webpack 的教程，但是对于创建 web 应用程序来说似乎更多的是我正在尝试做的事情，所以如果以下内容是不可能的，我不想再浪费时间了。

我正在第三方电子商务系统上创建网站，他们有一个编码模板系统，可用于更改其网站的结构。下面是我将创建的其中一个模板的示例（尽管我需要制作许多类型和变体，而不仅仅是几个）。

我简化这些模板的创建的想法是创建一堆 pug 组件并将它们放在 components/ 目录中。在组件目录之外，我想制作使用组件的更高级别的哈巴狗模板。创建这些后，我将使用 NPM 构建它，并且需要将模板文件转换为 HTML 并放置在 /dist 文件夹中。

用 webpack 很难做到吗？

项目结构：

src/
..components/
....header/
......header1.pug
......header1.scss
..navcustom-template.pug
..customfooter-template.pug
..non-template-specific.scss

一旦建成：

dist/
..navcustom-template.html
..customfooter-template.html
..non-template-specific.css

src/
..components/
....header/
......header1.pug
......header1.scss
..navcustom-template.pug
..customfooter-template.pug
..non-template-specific.scss

模板示例：

<!--
    Section: NavCustom
-->

<style>

    //Template Speific CSS Imports Here

</style>
<script type="text/javascript">

    //Template Speific JS Imports Here

</script>
<header>

    <div class="col-md-4">

        // Social Media Code

    </div>

    <div class="col-md-4">

        // Logo Code

    </div>

    <div class="col-md-4">

        //  Call to Action Code

    </div>

</header>
<nav>

</nav>

Answer 1

您可以使用这些包（--save-dev 为所有）：

• raw-loader 加载 Pug 文件
• pug-html-loader 读取 Pug 文件
• html-webpack-pug-plugin 从 Pug 生成 HTML
• html-webpack-plugin（标准 HTML 插件加载器）

然后像下面这样配置 Webpack，其中index.js 是一个虚拟文件，如果您还没有条目，则应创建该文件。您需要处理的每个 Pug 模板都写在底部的一个单独的 HtmlWebpackPlugin 对象中。

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPugPlugin = require('html-webpack-pug-plugin');

module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: __dirname + '/dist',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: [
          "raw-loader",
          "pug-html-loader"
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/navcustom-template.pug',
      filename: 'navcustom-template.html'
    }),
    new HtmlWebpackPlugin({
      template: 'src/customfooter-template.pug',
      filename: 'customfooter-template.html'
    }),
    new HtmlWebpackPugPlugin()
  ]
}

所有 Pug mixin（您的 src/components 文件）都将包含在输出中。此示例已经过测试并且可以正常工作。

---

编辑：要动态处理 src 目录中的所有 Pug 文件，请使用以下配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPugPlugin = require('html-webpack-pug-plugin');
const fs = require('fs');

let templates = [];
let dir = 'src';
let files = fs.readdirSync(dir);

files.forEach(file => {
  if (file.match(/\.pug$/)) {
    let filename = file.substring(0, file.length - 4);
    templates.push(
      new HtmlWebpackPlugin({
        template: dir + '/' + filename + '.pug',
        filename: filename + '.html'
      })
    );
  }
});

module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: __dirname + '/dist',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: [
          "raw-loader",
          "pug-html-loader"
        ]
      }
    ]
  },
  plugins: [
    ...templates,
    new HtmlWebpackPugPlugin()
  ]
}

这使用fs.readdirSync 来获取目录中的所有 Pug 文件。使用同步版本（而不是 fs.readdir），因为 module.exports 函数将在文件处理之前返回。