Webpack:编译文件夹但保留单独的文件? [英] Webpack: compile folder but keep separate files?

问题描述

我有将 nunjuck 文件编译为 html 文件的 Webpack 配置.但是，我必须手动指定每个文件的输入和输出.我不知道如何 1) 读取给定文件夹中的所有文件和 2) 输出 separate 编译文件到另一个文件夹中，如下所示:

I have Webpack config that compiles nunjuck files into html files. However, I have to specify every single file input and output manually. I can't figure out how to 1) read all files in given folder AND 2) output separate compiled files into another folder, like this:

src/file1.njk -> dist/file1.html
src/file2.njk -> dist/file2.html
...

这是我的配置文件:

const path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var glob_entries = require("webpack-glob-folder-entries");

// Optional, but highly recommended. Create a returnEntries:
// Webpack doesn't support glob paths. For the nunjucks-html-loader
// we need each path to be specified for it to work (YES, even subdirectories!)

function returnEntries(globPath) {
  let entries = glob_entries(globPath, true);
  let folderList = new Array();
  for (let folder in entries) {
    folderList.push(path.join(__dirname, entries[folder]));
  }
  return folderList;
}

module.exports = {
  entry: "./src/app.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  plugins: [
    // HtmlWebpackPluginConfig
    new HtmlWebpackPlugin({
      filename: "index.html",
      inject: "body",
      template: "nunjucks-html-loader!./src/pages/index.njk"
    }),
    new HtmlWebpackPlugin({
      filename: "1-categorize-devices.html",
      inject: "body",
      template: "nunjucks-html-loader!./src/pages/1-categorize-devices.njk"
    }),
    new HtmlWebpackPlugin({
      filename: "2-split-to-triggers-vs-actors.html",
      inject: "body",
      template:
        "nunjucks-html-loader!./src/pages/2-split-to-triggers-vs-actors.njk"
    }),
    new HtmlWebpackPlugin({
      filename: "3-generate-all-combinations.html",
      inject: "body",
      template:
        "nunjucks-html-loader!./src/pages/3-generate-all-combinations.njk"
    }),
    new HtmlWebpackPlugin({
      filename: "4-rate-all-combinations.html",
      inject: "body",
      template: "nunjucks-html-loader!./src/pages/4-rate-all-combinations.njk"
    }),
    new HtmlWebpackPlugin({
      filename: "5-cluster-useful-combinations.html",
      inject: "body",
      template:
        "nunjucks-html-loader!./src/pages/5-cluster-useful-combinations.njk"
    }),
    new HtmlWebpackPlugin({
      filename: "6-scenes-for-given-packages.html",
      inject: "body",
      template:
        "nunjucks-html-loader!./src/pages/6-scenes-for-given-packages.njk"
    }),
    new HtmlWebpackPlugin({
      filename: "7-design-templates.html",
      inject: "body",
      template: "nunjucks-html-loader!./src/pages/7-design-templates.njk"
    }),
    new HtmlWebpackPlugin({
      filename: "8-functional-prototype.html",
      inject: "body",
      template: "nunjucks-html-loader!./src/pages/8-functional-prototype.njk"
    })
  ],
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          {
            // Adds CSS to the DOM by injecting a `<style>` tag
            loader: "style-loader"
          },
          {
            // Interprets `@import` and `url()` like `import/require()` and will resolve them
            loader: "css-loader"
          },
          {
            // Loader for webpack to process CSS with PostCSS
            loader: "postcss-loader",
            options: {
              plugins: function() {
                return [require("autoprefixer")];
              }
            }
          },
          {
            // Loads a SASS/SCSS file and compiles it to CSS
            loader: "sass-loader"
          }
        ]
      },
      {
        // HTML LOADER
        // Super important: We need to test for the html
        // as well as the nunjucks files
        test: /\.html$|njk|nunjucks/,
        use: [
          "html-loader",
          {
            loader: "nunjucks-html-loader",
            options: {
              // Other super important. This will be the base
              // directory in which webpack is going to find
              // the layout and any other file index.njk is calling.
              //  searchPaths: [...returnEntries('./src/pages/**/')]
              // Use the one below if you want to use a single path.
              searchPaths: ["./src/pages"]
            }
          }
        ]
      }
    ]
  }
};

如您所见，我一直在重复 new HtmlWebpackPlugin() 并且无法弄清楚如何自动化操作.

As you can see, I keep repeating new HtmlWebpackPlugin() and can't figure out how to automate the operation.

非常感谢.

推荐答案

根据 HtmlWebpackPlugin docs 你正在做的实际上是一个 推荐方法(这显然很糟糕).

According to the HtmlWebpackPlugin docs what you are doing is actually a recommended approach (which obviously sucks).

但是您可以做的不是像那样手动一一列出它们，而是编写一个辅助函数，该函数将接收要转换的文件列表(通过 glob 通配符可以说)并输出 HtmlWebpackPlugin 指令的数组，您可以直接提供给 webpack配置.

But what you can do instead of listing them one by one manually like that, is write a helper function that will take in the list of files to convert (via glob wildcard lets say) and output the array of HtmlWebpackPlugin instructions, that you can feed directly to webpack config.

这只是JS.Webpack 配置只是一个 NodeJS 脚本.你可以做任何你喜欢的事情.

It's just JS. Webpack config is just a NodeJS script. You can do anything you like.

这篇关于Webpack:编译文件夹但保留单独的文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！