Webpack: ENOENT: keine solche Datei oder das Verzeichnis, offen ‚head.ejs‘

Ich habe folgende webpack.config.js Datei:Webpack: ENOENT: keine solche Datei oder das Verzeichnis, offen ‚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' 
    }), 


    ] 
};

Beim Versuch, eine EJS-Datei zu laden, die <% somefile %> die Datei kann nicht enthält gefunden .. das ist der Fehler, den ich erhalten:

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.

ich viele Dateipfad Formate ausprobiert haben, und keiner von ihnen arbeitete, hier ist mein ejs mit meiner Datei head.ejs im selben Ordner:

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

Quelle

2017-04-13 Christoph Anderson

Sie haben zwei verschiedene Lader für die index.ejs ausgebildet, die bei einem Zusammenstoß führt.

Eine allgemeine Regel für alle .ejs:

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

Eine Inline-Regel für die Vorlage in html-webpack-plugin:

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

Wenn Sie nur die Inline-Loader verwenden möchten Sie ein führender ! hinzufügen können, So verwendet das Webpack keine anderen Ladeprogramme:

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

Die obige Korrekturen Ihr Problem, aber es ist ein wenig fragwürdig, warum Sie zwei verschiedene ejs Lader haben. Um ehrlich zu sein, bin ich mir der Unterschiede in den Ladegeräten nicht völlig bewusst, da beide auf das gleiche GitHub repository zeigen, obwohl es mir wie ejs-render-loader nur eine frühere Version scheint. Sie behandeln die Includes tatsächlich anders, deshalb erhalten Sie den Fehler.

Aus dem Beispiel in Usage of ejs-compiled-loader:

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

Das heißt, wenn Sie die ejs-compiled-loader für alle .ejs Sie brauchen, um das zu ändern verwenden möchten, umfassen:

<% include views/head %>

Und Sie können loszuwerden der Inline-Lader im html-webpack-plugin:

template: './views/index.ejs'

Es liegt an Ihnen, ob Sie das ändern wollen, ich würde versuchen, Loader-Konflikte zu vermeiden, und ich glaube nicht, ejs-render-loader wird nicht mehr aktualisiert werden.

Tatsächlich gibt es eine v2.2.0 von ejs-compiled-loader, die auf das andere Include-Verhalten zurückging, relativ zur aktuellen Datei, die definitiv intuitiver ist. Sie können es installieren mit:

npm install --save-dev [email protected]

Quelle

2017-04-13 21:27:41

Ich kann keine Dokumentation für dynamische include für ejs-compiled-loader finden. Können Sie bitte ein Beispiel geben? Es sieht auch so aus, als würde das Webpack Änderungen an Vorlagen nicht mehr beobachten. Weißt du, wie funktioniert Auto-Watch funktioniert (Webpack Version 2 und ejs-compiled-loader Version 2) –

Webpack: ENOENT: keine solche Datei oder das Verzeichnis, offen ‚head.ejs‘

Antwort

Verwandte Themen