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

Posted 2021-05-06

我已经阅读了很多关于webpack的教程，但似乎更多的是创建Web应用程序，然后我正在尝试这样做，所以如果以下情况不可能，我不想浪费任何时间。

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

我简化这些模板创建的想法是创建一堆pug组件并将它们放在组件/目录中。在组件目录之外，我想制作使用组件的更高级别的哈巴狗模板。一旦创建了这些，我将使用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>

答案

你可以使用这些包（--save-dev for all）：

• 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 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函数将在处理文件之前返回。