html-webpack-pluginでEJSコンパイルとhtmlローダーの両方を取得するには？

私は私のhtml-webpack-pluginはまた、いくつか<img>タグを持っている私の.ejsテンプレートに基づいて、私のhtmlを生成したいです。html-webpack-pluginでEJSコンパイルとhtmlローダーの両方を取得するには？
html-loader私の<img>タグの画像アドレスをWebpack製のものに変更することができます。私は（答えずに言及した）rules
```
  test: /\.ejs$/, 
      use: ['html-loader'] 
```

しかしhttps://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.mdで述べたようにそれはhtml-webpack-pluginのフォールバック「EJS-ローダー」を無効にやってでこれを指定するので、私の<img>タグが正しく交換しましたが、EJSがコンパイル得ていません。

EJSがコンパイルされましたが、distフォルダの結果のHTMLの<img>タグはまだ古い名前を参照しています。

最終的なステップでは、Javascripや何かを期待していると言われているので、私は最終的なHTMLファイルに私に奇妙なmodule.exports = gibberishを与えてみました。 ONLY use: ['ejs-compiled-loader']はうまく動作します（私のEJSはコンパイルされました）、ONLY use: ['html-loader']だけでも問題ありません（私のimgタグがスキャンされました）

両方を取得するには？ありがとう。

出典

2017-11-04 5argon

できません。

最も簡単な方法は、私が見つけたこと、（それが痛い場合でも;）EJS-テンプレートにすべての道を堅持することである）

だから、あなたのテンプレートに名前を付け.ejsで終わる何か。

index.ejs

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>WebPack Labs 001</title> 
</head> 
<body> 
<h1><%= htmlWebpackPlugin.options.title %></h1> 
<img src="<%= require('./img/kolfiber.jpg') %>" alt=""> 
</body> 
</html>

注：

<img src="<%= require('./img/kolfiber.jpg') %>" alt="">

これは、画像（複数可）の作品を作るものです。

plugins: [ 
      new HtmlWebpackPlugin({ 
       template: 'src/index.ejs', 
       title: 'HTML Webpack Plugin', 
      }) 
     ],

そして、ここでは出力です：：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>WebPack Labs 001</title> 
<link href="/main.a543702ae62bbf007a2ec7ee6fb3571c.css" rel="stylesheet"></head> 
<body> 
<h1>HTML Webpack Plugin</h1> 
<img src="/static/media/images/kolfiber.a3a95779.jpg" alt=""> 

<script type="text/javascript" src="/main.a713c115b35765d7d4ed.js"></script></body> 
</html>

（だけでなく、この例の）私の完全な、現在のコンフィグ

これは私のプラグインがwebpack.config.jsで次のようになります。

const webpack = require('webpack'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const I18nPlugin = require('i18n-webpack-plugin'); 
const path = require('path'); 

const languages = { 
    en: null, 
    de: require('./src/app/lang/de.json'), 
}; 

module.exports = env => { 
    console.log(env); 

    const config = { 
     entry: './src/app/js/index.js', 
     output: { 
      path: path.resolve(__dirname, './dist'), 
      filename: '[name].[hash].js', 
      publicPath: '/', 
     }, 
     module: { 
      rules: [ 
       { 
        test: /\.(gif|jpe?g|png|webp)$/, 
        loader: 'file-loader', 
        query: { 
         limit: 8192, 
         name: 'static/media/images/[name].[hash:8].[ext]', 
        }, 
       }, 
       { 
        test: /\.css$/, 
        use: ExtractTextPlugin.extract({ 
         fallback: 'style-loader', 
         use: 'css-loader', 
        }), 
       }, 
       { 
        test: /\.scss$/, 
        use: ExtractTextPlugin.extract({ 
         fallback: 'style-loader', 
         use: ['css-loader', 'sass-loader'], 
        }), 
       }, 
       { 
        test: /\.txt$/, 
        use: [ 
         { 
          loader: 'file-loader', 
          options: { 
           name: '[name].[ext]', 
          }, 
         }, 
        ], 
       }, 
      ], 
     }, 
     plugins: [ 
      new webpack.DefinePlugin({ 
       PRODUCTION: JSON.stringify(true), 
       LANGUAGE: languages, 
      }), 
      new HtmlWebpackPlugin({ 
       template: 'src/index.ejs', 
       title: 'HTML Webpack Plugin', 
      }), 
      new ExtractTextPlugin({ 
       filename: '[name].[contenthash].css', 
       disable: process.env.NODE_ENV === 'development', 
      }), 
      new I18nPlugin(languages.de, { 
       failOnMissing: true, 
       hideMessage: false, 
      }), 
     ], 
    }; 

    return config; 
};

出典

2018-01-13 17:54:09 jBoive

html-webpack-pluginでEJSコンパイルとhtmlローダーの両方を取得するには？

答えて

関連する問題