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文件传递（According to the first paragraph）。

相反，请使用nunjucks-html-loader。

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

npm i nunjucks-html-loader -D

OR

yarn add nunjucks-html-loader -D

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

npm i webpack-glob-folder-entries -D

OR

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文件夹（如上所述），并且您没有将其指定为＆＃39; ./ client / templates / _partials＆＃39;，则加载程序将不要捡起来！

另外，

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

不用于index.njk，而用于index.njk调用的文件，在本例中为layout.njk。如果不包含njk或nunjucks扩展名，则不会加载layout.njk，它会给你一个错误。

Answer 2

我也在寻找解决方案时碰到了这个问题，被接受的解决方案对我不起作用，因此我发现将我的解决方案添加到混合中是合适的，有关如何在Web Pack中将nunjucks用作条目。 / p>

我一直遇到具有多个入口点的问题，直到最终找到以下仓库并解决了该问题。

使用Nunjucks-Isomorphic-Loader

在撰写本文时的通知，npm注册表尚未使用最新的代码更改进行更新，因此您需要直接从package.json

链接到该仓库。

这是我的：proof of concept repository

下面是我编写供参考的webpack配置：

const webpack = require('webpack');
const path = require('path');
const fs = require('fs');
const HtmlWebpackPlugin = require('html-webpack-plugin')

// Notice, the below methods searches src/components and adds a HtmlWebpackPlugin for each folder
// This is required, even for subfolders otherwise you nunjuck includes will nto work.
const d = './src/components';
const entryFolders = fs.readdirSync(path.resolve(d))
			.map(f => path.join(__dirname, path.join(d, f))  )
			.filter(f => fs.statSync(f).isDirectory());

function getHtmlComponentPlugins() {
	return entryFolders.map(templatePath => {
		const name = templatePath.split('\\').pop()

		const sett = {
	    	customData: { foo: 'bar' },
	    	filename: path.relative(__dirname, templatePath.replace('src\\', '') + `\\${name}.html`),
	    	template: templatePath + `\\${name}.njk`
	  	};

		return new HtmlWebpackPlugin(sett)
	});
}

module.exports = function() {
	return {
		devtool: '#source-map',
		mode: 'development',
		entry: [
			'./src/index.js'
		],
		output: {
			path: path.resolve(__dirname, 'dist')
		},
	    resolve: {
	      extensions: [ '.js' ]
	    },
		module: {
		    rules : [
				{
				  	test: /\.(njk|nunjucks|html|tpl|tmpl)$/,
				  	use: [
				    	{
				    		loader: 'nunjucks-isomorphic-loader',
				      		query: {
				        	root: [
				        		path.resolve(__dirname, 'src'),
				        		
				        	].concat(entryFolders)
				      	}
				    }
				  ]
				}
		    ]
		},
		plugins: [
		  new HtmlWebpackPlugin({
		    customData: { foo: 'bar' },
		    filename: 'index.html',
		    template: 'src/index.njk'
		  })
		].concat(getHtmlComponentPlugins())
	};
}

Answer 3

您宁愿尝试nunjucks-webpack-plugin，也不要混合使用加载器（nunjucks-loader）和Webpack插件（HtmlWebpackPlugin）。

它看起来像是HtmlWebpackPlugin的良好替代品！

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

3 个答案: