如何使用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'] 
     }] 
    };

来源

2017-10-09 Jose A

这可能是很长，但是请多多包涵：

的问题是，nunjucks装载机并将其作为一个JavaScript文件（According to the first paragraph）。可以使用nunjucks-html-loader。

通过使用NPM或纱线安装：首先，我们安装nunjucks-HTML装载机：

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，它会给你一个错误。

来源

2017-10-09 22:34:44

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

回答

相关问题