nunjucks 파일을 webpack의 진입 점으로 사용하려면 어떻게해야합니까?

Question

나는이 게시물을 ejs으로 보았습니다. 그러나 webpack을 사용하여 어떻게 달성 할 수 있습니까?

html-webpack-plugin과 함께 nunjucks-loader를 사용해 보았지만 다음 오류가 발생합니다 : [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 - 로더로 전달하는 것입니다 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 (more on this)

npm i webpack-glob-folder-entries -D 

또는(210)

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 %} 

우리는 단지 웹팩을 구성 할 수 있습니다, 다음 설정을 사용하십시오.

//#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 디렉토리를 지원하지 않습니다. nunjucks-html-loader가 볼 수있는 모든 하위 폴더 목록을 제공하는 webpack-glob-folder-entries을 사용하여 도우미 함수를 작성했습니다. 폴더를 지정하지 않으면 (하위 디렉토리 인 경우에도) 이 아니라이 작동 함을 이해하십시오.

즉, 위와 같이 _partials 폴더를 사용하려는 경우 './client/templates/_partials'로 지정하지 않으면 로더가 해당 파일을 선택하지 않습니다.또한

,

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

이 경우 layout.njk에 전화를 index.njk 파일의 index.njk하지만 사용되지 않습니다. njk 또는 nunjucks 확장명을 포함하지 않으면 layout.njk이로드되지 않으며 오류가 발생합니다.