的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>

答

你必须配置为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]

我无法找到动态包含ejs编译加载器的文档。你能举个例子吗？也似乎webpack不再看模板上的更改。你知道如何让自动监测工作（webpack版本2和ejs-compiled-loader版本2） –

的WebPack：ENOENT：没有这样的文件或目录，打开“head.ejs”

相关推荐