5

これは私のwebpack構成です：

import path from 'path';

var HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    entry: {
        index: './dev/index.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        // publicPath: 'http://localhost:3000/',
        filename: 'bundle.js',
        chunkFilename: '[id].bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: path.resolve(__dirname, "node_modules"),
                loader: 'babel-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            hash: true,
            template: 'ejs!./dev/index.ejs',
            inject: 'body'
        })
    ]

};

私のindex.ejsファイル：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <%- include html/one/1.ejs %>

</body>

</html>

私のフォルダ構造：

dev/
  /assets
  /html
    /one
      1.ejs
      1.scss
      1.js
    /two
    /three
  index.js
  index.ejs

HTMLファイルをモジュール化したいので、それらを含めたい...

別のテンプレートを含む多くの方法を試しましたが、どれもうまくいきませんでした...

どうすればこれを機能させることができるか、誰かが私にアイデアを与えることができますか?

4

3 に答える 3

5

ejs-render-loaderパッケージを使用します。パッケージを見る

plugins: [
    new HtmlWebpackPlugin({
        hash: true,
        template: 'ejs-render!./dev/index.ejs',
        inject: 'body'
    })
]

私はそれがあなたの問題を解決すると思います。

更新: webpack3 では、ローダーの構文が変更されました。'ejs-render!./dev/index.ejs'次のようになります。'ejs-render-loader!./dev/index.ejs'

于 2016-10-13T02:39:34.720 に答える
0

ejs-webpack-loaderは私のために動作します ( "ejs-webpack-loader": "^2.2.2", "webpack": "^4.41.5")。その Web ページに ejs の例が含まれています。

于 2020-02-10T15:01:16.250 に答える