的WebPack：ENOENT：沒有這樣的文件或目錄，打開「head.ejs」

我有以下webpack.config.js文件：的WebPack：ENOENT：沒有這樣的文件或目錄，打開「head.ejs」

'use strict'; 

let path = require('path'); 
let webpack = require('webpack'); 
let HtmlWebpackPlugin = require('html-webpack-plugin'); 
let ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: [ 
    './index.js' 
    ], 
    output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname, 'dist'), 
    publicPath: '/' 
    }, 
    devtool: 'inline-source-map', 
    watch: true, 
    module: { 
    rules: [ 
     { 
     test: /\.jsx?$/, 
     use: 'babel-loader', 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.css$/, 
     use: ExtractTextPlugin.extract({ 
      use: [ 'style-loader', 'css-loader?modules', ], 
      publicPath: '/dist' 
     }) 
     }, 
     { 
     test: /\.ejs$/, 
     use: 'ejs-compiled-loader' 
     } 
    ], 
    }, 
    plugins: [ 
    new ExtractTextPlugin({ 
     filename: 'styles.css' 
    }), 

    new webpack.HotModuleReplacementPlugin(), 

    new webpack.NamedModulesPlugin(), 

    new HtmlWebpackPlugin({ 
     minify: { 
     collapseWhitespace: true 
     }, 
     hash: true, 
     template: 'ejs-render-loader!./views/index.ejs' 
    }), 


    ] 
};

當試圖加載包含EJS文件<% somefile %>文件不能發現..這是錯誤我收到：

Child html-webpack-plugin for "index.html": 
     Asset  Size Chunks Chunk Names 
    index.html 26.2 kB  0 
    chunk {0} index.html 554 bytes [entry] 
    [./node_modules/ejs-render-loader/index.js!./views/index.ejs] ./~/ejs-render-loader!./views/index.ejs 554 bytes {0} [built] [failed] [1 error] 

    ERROR in ./~/ejs-render-loader!./views/index.ejs 
    Module build failed: Error: ENOENT: no such file or directory, open 'head.ejs' 
     at Object.fs.openSync (fs.js:584:18) 
     at fs.readFileSync (fs.js:491:33) 
     at Object.exports.parse (/var/www/rio-olympics-3/monitor/node_modules/ejs-compiled-loader/node_modules/ejs/lib/ejs.js:168:19) 
     at Object.exports.compile (/var/www/rio-olympics-3/monitor/node_modules/ejs-compiled-loader/node_modules/ejs/lib/ejs.js:245:15) 
     at Object.module.exports (/var/www/rio-olympics-3/monitor/node_modules/ejs-compiled-loader/index.js:7:22) 
webpack: Failed to compile.

我已經嘗試了許多文件路徑格式，和他們沒有工作，這是我的EJS與我的文件head.ejs在同一文件夾：

<!DOCTYPE html> 
    <html lang="en"> 

    <% include head %> 

    <body> 
     <div id="navbar-app"></div> 
     <p> Welcome, more coming soon! </p> 
    </body> 


    <!-- insert component scripts below here --> 
    <script src="dist/js/NavBarMain.js"></script> 

    </html>

來源

2017-04-13 Christoph Anderson

你必須配置爲index.ejs，從而導致衝突兩個不同的裝載機。

一般的規則對所有.ejs：

{ 
    test: /\.ejs$/, 
    use: 'ejs-compiled-loader' 
}

在html-webpack-plugin爲模板內聯規則：

template: 'ejs-render-loader!./views/index.ejs'

如果只想使用內嵌裝載機，你可以添加一個領先!，所以webpack不會應用其他裝載機：

template: '!ejs-render-loader!./views/index.ejs'

上述問題解決了您的問題，但爲什麼您有兩個不同的ejs裝載機，這是有點兒疑問。說實話，我並沒有完全意識到裝載機的差異，因爲它們都指向相同的GitHub repository，儘管在我看來ejs-render-loader只是一個較早的版本。他們實際上處理的包含不同，這就是爲什麼你得到錯誤。

從例子中Usage of ejs-compiled-loader：

// Child Templates 
// path is relative to where webpack is being run 
<%- include templates/child -%>

，如果你想使用ejs-compiled-loader所有.ejs這意味着你需要改變包括到：

<% include views/head %>

而且你可以擺脫html-webpack-plugin中的內嵌裝載器：

template: './views/index.ejs'

這取決於你是否要改變這一點，我只是想盡量避免加載器衝突，我不認爲ejs-render-loader將被更新。

事實上，有一個v2.2.0的ejs-compiled-loader回到另一個包含行爲，相對於當前文件，這是明確更直觀。您可以安裝它：

npm install --save-dev [email protected]

來源

2017-04-13 21:27:41

我無法找到動態包含ejs編譯加載器的文檔。你能舉個例子嗎？也似乎webpack不再看模板上的更改。你知道如何讓自動監測工作（webpack版本2和ejs-compiled-loader版本2） –

的WebPack：ENOENT：沒有這樣的文件或目錄，打開「head.ejs」

回答

相關問題