Kann nicht finden, Eintrag Modul im webpack mit nodejs-API

Ich versuche zu laufen webpack innerhalb von nodejs. Meine Verzeichnis Struktur sieht wie folgt aus:

build
|- dev.js
dist
|- bundle.js
src
|- layout
   |- App.js
|- server
   |- app.js

dev.js:

const webpack = require('webpack');
const path = require('path');

//returns a Compiler instance
const compiler = webpack(
  {
    context: path.resolve(__dirname, '../src'),
    entry: [
      './server/app.js'
    ],
    output: {
      path: path.join(__dirname, '../dist'),
      filename: 'bundle.js'
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader?presets[]=es2015&presets[]=react'
        }
      ]
    }
  }
);

compiler.run(function(err, stats) {
  if(err) {
    console.log('Err');
  }
});

app.js:

import express from 'express';

import React from 'react';
import { renderToString } from 'react-dom/server';

import App from '../layout/App';
const app = express();

app.get('*', (req, res) => {
  res.send(renderToString(<App />));
});


app.listen(3000, () => {
});

Wenn ich starte jetzt node build/dev.js es erzeugt meiner bundle.js aber kann es nicht finden mein Eintrag Modul.

(function webpackMissingModule() { throw new Error("Cannot find module \"./server/app.js\""); }());

Obwohl ich denke, dass dies ist, wie die entry-point definiert werden sollte, ich habe versucht, viele Kombinationen, auch den absoluten Pfad. Aber immer das gleiche Ergebnis, es kann nicht finden den Eintrag Modul. Was vermisse ich hier?

 

One Reply
  1. 2
    1. Es sieht aus wie etwas schief geht mit der Bündelung der assets, da webpack sieht in Ihrem node_modules zu finden, seine Vermögenswerte, es wäre am besten, wenn Sie posten könnte Ihr Paket.json-neben den anderen Dateien.
    2. Du bist mit webpack Programm anstelle des Standard – webpack Befehl, die in der Regel erzeugt eine Menge debug-Ausgabe (zusammen mit Informationen über das build-Schritten, Fehler, etc.) – Ich würde vorschlagen, mit, dass zu Debuggen, und wechseln Sie dann zu den programmatischen Ansatz, wenn Sie wissen, dass alles funktioniert.
    3. Es sieht aus wie Sie wollen, zu tun, server-side-rendering mit reagieren. Einige spezielle Konfiguration nötig ist für Ihr webpack-Konfiguration. Dies wird bereits hier behandelt: http://jlongster.com/Backend-Apps-with-Webpack–Part-I

    Ohne die package.json es ist wirklich schwer zu Debuggen, was genau schief geht hier.

    Vorausgesetzt, Ihr Paket.json ist richtig, hier ist ein dev.js – Datei, die funktioniert mit dem obigen code:

    const webpack = require('webpack');
    const path = require('path');
    const fs = require('fs');
    
    var nodeModules = {};
    fs.readdirSync('node_modules')
      .filter(function(x) {
        return ['.bin'].indexOf(x) === -1;
      })
      .forEach(function(mod) {
        nodeModules[mod] = 'commonjs ' + mod;
      });
    
    //returns a Compiler instance
    const compiler = webpack(
      {
        context: path.resolve(__dirname, "../src"),
        target: 'node',
        entry: [
          './server/app.js'
        ],
        output: {
          path: path.join(__dirname, '../dist'),
          filename: 'bundle.js'
        },
        module: {
          loaders: [
            {
              test: /\.js$/,
              exclude: /node_modules/,
              loader: 'babel-loader?presets[]=es2015&presets[]=react'
            }
          ]
        },
        externals: nodeModules
      }
    );
    
    compiler.run(function(err, stats) {
      console.log(err, stats);
    });
    • Es scheint, dass es nicht kompilieren konnte, <App /> in app.js ohne die babel-loader. npm i --save-dev babel-loader wurde das Problem behoben.
    • Eine kleine Einschränkung: mit privaten Organisationen, die Pakete installiert sind, unter node_modules/@organisation/packageName, so müssen Sie diese hinzufügen „manuell“ direkt nach readdirSync. Mit `nodeModules[‚@myorg/MeinPaket‘] = ‚commonjs MeinPaket‘

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.