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-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 mixins（您的 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 函数将在处理文件之前 return。

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

Can Webpack build multiple HTML files from SCSS and Pug?

javascript

node.js

npm

webpack

pug-loader