html-webpack-plugin + twig-loaderに画像を含めるには？

私は小枝のテンプレートにイメージを単純なタグのように含めることを試みていますが、含めたくありません。ビルドには、HtmlWebpackPluginとtwig-loaderを使用します。しかし、私はhtml-loaderとhtmlテンプレートで同じことをしてもうまくいきます。 twig-loaderで正しく行うには？html-webpack-plugin + twig-loaderに画像を含めるには？

私のWebPACK-config設定：

const path    = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

const PATHS = { 
    source: path.join(__dirname, './source'), 
    build: path.join(__dirname, './build') 
}; 

module.exports = { 
    entry: `${ PATHS.source }/index.js`, 
    output: { 
     path:  PATHS.build, 
     filename: 'webpack.bundle.js' 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.twig/, 
       loader: 'twig-loader' 
      }, 
      { 
       test: /.*\.(gif|png|jpe?g)$/i, 
       use: [ 
        { 
         loader: 'file-loader?name=[name].[ext]' 
        } 
       ] 
      } 
     ] 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      filename: 'index.html', 
      template: `${PATHS.source}/index.twig`, 
     }) 
    ], 
};

私の小枝テンプレート：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 
    <img src="./chuck-norris.jpg" alt=""> 
</body> 
</html>

私のpackage.json：

{ 
    "name": "htmlWebpackPlugin-twigLoader", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "build": "webpack" 
    }, 
    "author": "evisotskiy", 
    "license": "ISC", 
    "devDependencies": { 
    "file-loader": "^0.11.2", 
    "html-loader": "^0.5.1", 
    "html-webpack-plugin": "^2.30.1", 
    "twig-loader": "^0.3.1", 
    "webpack": "^3.6.0" 
    } 
}

私のプロジェクトの構造：

. 
├── webpack.config.js 
├── package.json 
├── source 
| ├──index.twig 
| ├──index.js (empty) 
| ├──chuck-norris.jpg

01チャック・norris.jpg

とするとき、私は、HTML-ローダーの代わりに小枝ローダとHTMLテンプレートの代わりに小枝、テンプレートを使用せずに

├── build 
| ├──index.html 
| ├──webpack.bundle.js

- ：

とするとき、私は実行するには、私はディレクトリを取得し実行するビルドをNPM画像はうまくいきます。しかし私のプロジェクトでは、私は小枝のテンプレートを使用する必要があります。 twig-loaderで正しく行うには？

出典

2017-11-19 evisotskiy

私は解決策を見つけました。 HtmlWebpackPluginにテンプレートとして.twig-fileを直接渡すのではなく、.js -fileというテンプレートを渡しました。その中に.twigというファイルと画像が含まれ、画像を変数としてtwig-templateに渡しました。今、このプロジェクトは、次のようになります。

私のWebPACK-config設定：

const path    = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

const PATHS = { 
    source: path.join(__dirname, './source'), 
    build: path.join(__dirname, './build') 
}; 

module.exports = { 
    entry: `${ PATHS.source }/index.js`, 
    output: { 
     path:  PATHS.build, 
     filename: 'webpack.bundle.js' 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.twig$/, 
       loader: 'twig-loader' 
      }, 
      { 
       test: /.*\.(gif|png|jpe?g)$/i, 
       use: [ 
        { 
         loader: 'file-loader?name=[name].[ext]' 
        } 
       ] 
      } 
     ] 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      filename: 'index.html', 
      template: `${PATHS.source}/index.twig.js`, 
     }) 
    ], 
};

私の小枝テンプレート：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 
    <img src="{{ image.src }}" alt="{{ image.alt }}"> 
</body> 
</html>

私index.twig.js：

const template = require('./index.twig'); 

const image = { 
    src: require('./chuck-norris.jpg'), 
    alt: "Chuck Norris" 
}; 

module.exports = template({ image });

私のパッケージ.json：

{ 
    "name": "htmlWebpackPlugin-twigLoader", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "build": "webpack" 
    }, 
    "author": "evisotskiy", 
    "license": "ISC", 
    "devDependencies": { 
    "file-loader": "^0.11.2", 
    "html-webpack-plugin": "^2.30.1", 
    "twig-loader": "^0.3.1", 
    "webpack": "^3.6.0" 
    } 
}

私のプロジェクトの構造：私は、NPMの実行ビルドを実行すると

. 
├── webpack.config.js 
├── package.json 
├── source 
| ├──index.twig 
| ├──index.twig.js 
| ├──index.js (empty) 
| ├──chuck-norris.jpg

と私が建てる取得プロジェクト私は予想：

├── build 
| ├──index.html 
| ├──chuck-norris.jpg 
| ├──webpack.bundle.js

出典

2018-01-02 15:26:14 evisotskiy

html-webpack-plugin + twig-loaderに画像を含めるには？

答えて

関連する問題