如何使用nunjucks文件作为webpack的入口点？

Question

我用ejs看过这篇文章.但是我如何通过webpack实现同样的目标呢？

我尝试使用nunjucks-loader html-webpack-plugin,但是我收到以下错误:[nunjucks-loader] non-web targets are not supported.

这是我的代码:

这是配置:

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  //template: './client/index.html',
  filename: 'index.html',
  inject: 'body',
  template: 'nunjucks-html-loader!./client/templates/index.njk',
});

module: {
    loaders: [
      {
        test: /\.html$/,
        use: ['html-loader']
      }, 
      {
        test: /\.|njk|nunjucks$/,
        use: ['nunjucks-loader']
      }]
  };

Answer 1

这可能很长,但请跟我一起承担:

问题是nunjucks-loader将它作为JavaScript文件传递(根据第一段).

相反,使用nunjucks-html-loader.

使用npm或yarn安装它:首先,我们安装nunjucks-html-loader:

npm i nunjucks-html-loader -D

要么

yarn add nunjucks-html-loader -D

我还建议安装(这是可选的)webpack-glob-folder-entries(更多内容)

npm i webpack-glob-folder-entries -D

要么

yarn add webpack-glob-folder-entries -D

然后,如果我们认为我们有以下文件夹结构:

- client/
     -templates/
          -index.njk   
          -layout.njk
          -_partials/
- webpack.config.js

在index.njk里面我们有这样的东西:

<!-- index.nunjucks -->
{% extends "layout.njk" %}
{% block content %}
   <h1> Here comes my content that is injected to layout.njk!</h1>
{% endblock %}

我们可以使用以下设置配置webpack:

//#1: Define the HTML Webpack Plugin:
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    filename: 'index.html',
    inject: 'body',

// Here is part of the magic, we get the index.njk but we tell
// webpack to pass it through the nunjucks-html-loader
    template: 'nunjucks-html-loader!./client/templates/index.njk',
  });

// 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 = {
// You should not have this the same. This is from my site. Go down to see the important part:
    entry: './client/index.js',
    output: {
      filename: production ? '[name]-[hash].js' : 'bundle.js',
      path: __dirname + '/dist',
      publicPath: 'dist/' //Important!!! : https://github.com/webpack/webpack/issues/1426
    },
   // #2  We load the HTMLWebpackPluginConfig
    plugins: [
      HtmlWebpackPluginConfig,
      extractTextPlugin
    ],

    resolve: {
      extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.tsx']
    },

// HERE is the important part
    module: {
      loaders: [
        {
          // 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('./client/templates/**/')]
               // Use the one below if you want to use a single path.
               // searchPaths: ['./client/templates'],
            }
          }]
        }
        ]
    }
}

然后跑webpack,你很高兴.

注意:

searchPaths: ['./client/templates'],

很重要.这是Webpack用于查找index.njk正在调用的任何文件的基本路径.尝试弄乱路径,了解它是如何工作的.但是不要删除它.

此外,webpack 不支持glob目录.我写了一个帮助函数webpack-glob-folder-entries,它给了我nunjucks-html-loader可以看到的所有子文件夹的列表.请理解,如果您没有指定文件夹(即使它是一个子目录),它将无法工作).

换句话说,如果您想使用_partials文件夹(如上所述),并且您没有将其指定为'./client/templates/_partials',则加载程序将不会将其取出!

也,

 test: /\.html$|njk|nunjucks/,

不用于index.njk,而是用于 index.njk调用的文件,在本例中为layout.njk.未能包含njk或nunjucks扩展名将不会加载layout.njk,它会给你一个错误.