1

我已经阅读了很多关于 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>
4

1 回答 1

3

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

然后像下面这样配置 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文件）都将包含在输出中。这个例子已经过测试并且可以工作。

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

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

于 2018-09-05T05:02:50.810 回答