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

【问题标题】：Webpack: ENOENT: no such file or directory, open 'head.ejs'Webpack：ENOENT：没有这样的文件或目录，打开“head.ejs”
【发布时间】：2017-04-13 18:59:43
【问题描述】：

我有以下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>

【问题讨论】：

标签： javascript webpack ejs webpack-2 html-webpack-plugin

【解决方案1】：

您为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 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

【讨论】：

我找不到 ejs-compiled-loader 的动态包含文档。你能举个例子吗？似乎 webpack 不再关注模板的变化。你知道如何让 auto-watch 工作（webpack 版本 2 和 ejs-compiled-loader 版本 2）