如何使用nunjucks文件作为webpack的入口点?
我看到这个帖子与ejs。但是我怎样才能实现与webpack一样的功能呢?如何使用nunjucks文件作为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']
}]
};
这可能是很长,但是请多多包涵:
的问题是,nunjucks装载机并将其作为一个JavaScript文件(According to the first paragraph)。可以使用nunjucks-html-loader。
通过使用NPM或纱线安装: 首先,我们安装nunjucks-HTML装载机:
npm i nunjucks-html-loader -D
OR
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,它会给你一个错误。