Webpack: compile folder but keep separate files?

问题

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
...

this is my config file:

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"]
            }
          }
        ]
      }
    ]
  }
};

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

Thank you very much.

回答1:

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

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.

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

来源：https://stackoverflow.com/questions/55363974/webpack-compile-folder-but-keep-separate-files