我有以下 webpack.config.js文件:
'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'
}),
]
};
尝试加载包含 <% somefile %> 的 ejs 文件时找不到文件。这是我收到的错误:
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 使用 ejs-compiled-loader 你需要将 include 更改为:
<% include views/head %>
而且你可以去掉 html-webpack-plugin 中的内联加载器:
template: './views/index.ejs'
是否要更改它取决于您，我只是尽量避免加载程序冲突，我认为 ejs-render-loader 不会再更新。
事实上，ejs-compiled-loader 有一个 v2.2.0，它返回到另一个包含行为，相对于当前文件，这绝对是更多直觉的。你可以安装它:
npm install --save-dev ejs-compiled-loader@2.2.0
关于javascript - Webpack: ENOENT: 没有那个文件或目录，打开 'head.ejs'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43399823/