首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Webpack:编译文件夹,但要保存单独的文件?

Webpack:编译文件夹,但要保存单独的文件?
EN

Stack Overflow用户
提问于 2019-03-26 18:27:06
回答 2查看 1.6K关注 0票数 1

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

代码语言:javascript
代码运行次数:0
运行
复制
src/file1.njk -> dist/file1.html
src/file2.njk -> dist/file2.html
...

这是我的配置文件:

代码语言:javascript
代码运行次数:0
运行
复制
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(),不知道如何使操作自动化。

非常感谢。

EN

回答 2

Stack Overflow用户

发布于 2019-03-27 06:16:34

根据HtmlWebpackPlugin文档,您所做的实际上是一个推荐方法 (这显然很糟糕)。

但是,您可以做的不是像这样手动地列出它们,而是编写一个助手函数,它将接收要转换的文件列表(通过格罗布通配符让我们这么说),并输出HtmlWebpackPlugin指令数组,您可以直接输入到webpack配置。

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

票数 3
EN

Stack Overflow用户

发布于 2019-12-11 05:29:43

像这样的事情应该能起作用:

代码语言:javascript
代码运行次数:0
运行
复制
 const glob = require('glob');


 const pages = glob.sync('**/*.njk', {
    cwd: path.join(__dirname, 'src/pages/'),
    root: '/',
  }).map(page =>
    new HtmlWebpackPlugin({
      filename: page.replace('njk', 'html'),
      template: `src/pages/${page}.njk`,
    }));

然后使用它:

代码语言:javascript
代码运行次数:0
运行
复制
plugins: [
  ...pages,
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55363974

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档