Wie kann ich Webpack mit Express verwenden?

Lesezeit: 11 Minuten

Wenn ich versuche, Webpack mit einem einfachen Express-Server zu verwenden, erhalte ich immer TONNENweise Fehler:
express.js

'use strict';
var express = require('express');
var path = require('path');
var url = require('url');


// -------- my proxy----------------------
var app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.set('port', process.env.PORT || 8080);
app.use(function logErrors(err, req, res, next) {
        console.error(err.stack);
        next(err);
    }
);

app.listen(app.get('port'), function() {
    console.info('Express server started at http://localhost:' + app.get('port'));
});

Ich bekomme all diese Fehler:

Version: webpack 1.10.0
Time: 1200ms
  Asset    Size  Chunks             Chunk Names
outfile  559 kB       0  [emitted]  main
chunk    {0} outfile (main) 498 kB [rendered]
    [0] ../app/server/express2.js 553 bytes {0} [built]
     + 125 hidden modules

WARNING in ../~/express/lib/view.js
Critical dependencies:
78:29-56 the request of a dependency is an expression
 @ ../~/express/lib/view.js 78:29-56

ERROR in ../~/express/lib/request.js
Module not found: Error: Cannot resolve module 'net' in /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/lib
 @ ../~/express/lib/request.js 18:11-25

ERROR in ../~/express/lib/view.js
Module not found: Error: Cannot resolve module 'fs' in /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/lib
 @ ../~/express/lib/view.js 18:9-22

ERROR in ../~/express/~/send/index.js
Module not found: Error: Cannot resolve module 'fs' in /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/send
 @ ../~/express/~/send/index.js 25:9-22

ERROR in ../~/express/~/etag/index.js
Module not found: Error: Cannot resolve module 'fs' in /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/etag
 @ ../~/express/~/etag/index.js 22:12-25

ERROR in ../~/express/~/send/~/destroy/index.js
Module not found: Error: Cannot resolve module 'fs' in /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/send/node_modules/destroy
 @ ../~/express/~/send/~/destroy/index.js 1:17-30

ERROR in ../~/express/~/send/~/mime/mime.js
Module not found: Error: Cannot resolve module 'fs' in /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/send/node_modules/mime
 @ ../~/express/~/send/~/mime/mime.js 2:9-22

ERROR in ../~/express/~/send/~/statuses/codes.json
Module parse failed: /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/send/node_modules/statuses/codes.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "100": "Continue",
|   "101": "Switching Protocols",
|   "102": "Processing",
 @ ../~/express/~/send/~/statuses/index.js 2:12-35

ERROR in ../~/express/~/send/~/mime/types.json
Module parse failed: /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/send/node_modules/mime/types.json Line 1: Unexpected token :
You may need an appropriate loader to handle this file type.

|
 @ ../~/express/~/send/~/mime/mime.js 87:12-35

ERROR in ../~/express/~/accepts/~/mime-types/~/mime-db/db.json
Module parse failed: /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/accepts/node_modules/mime-types/node_modules/mime-db/db.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "application/1d-interleaved-parityfec": {
|     "source": "iana"
|   },
 @ ../~/express/~/accepts/~/mime-types/~/mime-db/index.js 11:17-37

ERROR in ../~/express/~/type-is/~/mime-types/~/mime-db/db.json
Module parse failed: /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/type-is/node_modules/mime-types/node_modules/mime-db/db.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "application/1d-interleaved-parityfec": {
|     "source": "iana"
|   },
 @ ../~/express/~/type-is/~/mime-types/~/mime-db/index.js 11:17-37

und das ist meine Konfigurationsdatei:

var webpack = require('webpack');


module.exports = {
    // Makes sure errors in console map to the correct file
    // and line number
    devtool: 'eval',
    entry: [
        './bin/www.js'
    ],
    output: {
        path: './bin/out',
        filename: 'server.js'
    },

    extensions: [
        '',
        '.jsx', '.js'
    ],

    module: {

        loaders: [
            // Compile es6 to js.
            {
                test: /app\/.*\.js?$/,
                loaders: [
                    'react-hot',
                    'babel-loader'
                ]
            }
        ]
    },

    devtool: 'source-map'
};

Was kann ich tun, ich muss das Webpack auch auf meiner Serverseite verwenden.

Ich führe die express.js-Datei wie folgt aus:
./node_modules/webpack/bin/webpack.js ../app/server/express.js outfile --display-chunks -c --progress -d

  • Webpack ist für Browser und Express ist serverseitig, ich denke, Sie müssen Ihre Serverdefinition nicht packen

    – rkmax

    28. Juni 2015 um 16:50 Uhr

  • Aber ich habe Beispiele von Leuten gesehen, die Webpack auch für die Serverseite verwendet haben. Sie sehen, ich möchte denselben Code für Client und Server verwenden und die Vorteile von Webpacks-Funktionen nutzen.

    – SudoPlz

    28. Juni 2015 um 17:41 Uhr

  • Ja. Es gibt eine Möglichkeit, Code auf beiden Seiten wiederzuverwenden, aber Express existiert für die Verarbeitung von Anfragen, das Bereitstellen von Dateien und möglicherweise andere Dinge. Normalerweise haben wir in Node-Projekten zwei verschiedene Ordner, einen für Servercode und einen anderen für Client/Browser. wir wenden webpack/browserify auf das letzte an

    – rkmax

    28. Juni 2015 um 18:01 Uhr

Benutzer-Avatar
SudoPlz

Am Ende habe ich 2 verschiedene Konfigurationen verwendet, 1 zum Zusammenpacken des Server-Zeugs mit Webpack und 1 zum Zusammenpacken des gesamten Browser-Zeugs und zum Ausführen des Webpack-Dev-Servers zum erneuten Laden im laufenden Betrieb.

Server-Webpack-Konfiguration auch bekannt webpack.node.config.js sieht jetzt so aus:

var webpack = require('webpack');
var path = require('path');
var fs = require('fs');
var nodeModules = {};

// note the path.resolve(__dirname, ...) part
// without it, eslint-import-resolver-webpack fails
// since eslint might be invoked with different cwd
fs.readdirSync(path.resolve(__dirname, 'node_modules'))
    .filter(x => ['.bin'].indexOf(x) === -1)
    .forEach(mod => { nodeModules[mod] = `commonjs ${mod}`; });

// es5 style alternative
// fs.readdirSync(path.resolve(__dirname, 'node_modules'))
//     .filter(function(x) {
//         return ['.bin'].indexOf(x) === -1;
//     })
//     .forEach(function(mod) {
//         nodeModules[mod] = 'commonjs ' + mod;    
//     });

module.exports =

{
    // The configuration for the server-side rendering
    name: 'server',
    target: 'node',
    entry: './app/server/serverEntryPrototype.js',
    output: {
        path: './bin/',
        publicPath: 'bin/',
        filename: 'serverEntryPoint.js'
    },
    externals: nodeModules,
    module: {
        loaders: [
            { test: /\.js$/,

                loaders: [
                    // 'imports?document=this',

                    // 'react-hot',
                    'babel-loader'
                    //,'jsx-loader'
                ]
            },
            { test:  /\.json$/, loader: 'json-loader' },
        ]
    },
    plugins: [
    // new webpack.NormalModuleReplacementPlugin("^(react-bootstrap-modal)$", "^(react)$")
    // new webpack.IgnorePlugin(new RegExp("^(react-bootstrap-modal)$"))
    // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  ]
};

Browser-Webpack-Konfiguration auch bekannt webpack.browser.config.js sieht jetzt so aus:

var webpack = require('webpack');
var path = require('path');
var buildPath = path.resolve(__dirname, 'assets');
var fs = require('fs');


var commonLoaders = [
    { test: /\.js$/,

        loaders: [
            'react-hot',
            'babel-loader'
            //,'jsx-loader'
        ]
    }
];


module.exports =
{
    // Makes sure errors in console map to the correct file
    // and line number
    name: 'browser',
    devtool: 'eval',
    entry: [
        //'./bin/www.js',
        './app/index.js',
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8081'  // WebpackDevServer host and port
    ],
    output: {
        path: buildPath,
        filename: '[name].js',
        // Everything related to Webpack should go through a build path,
        // localhost:3000/build. That makes proxying easier to handle
        publicPath: 'http://localhost:8081/assets/'
    },

    extensions: [
        '',
        '.jsx', '.js',
        '.json',
        '.html',
        '.css', '.styl', '.scss', '.sass'
    ],

    module: {

        loaders: [
            // Compile es6 to js.
            {
                test: /app\/.*\.jsx?$/,
                loaders: [
                    'react-hot',
                    'babel-loader'
                ]
            },

            ///app\/.*\.json$/
            { test:  /\.json$/, loader: 'json-loader' },

            // Styles
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.s(a|c)ss$/, loader: 'style!css?localIdentName=[path][name]---[local]---[hash:base64:5]!postcss!sass' },

            // Fonts
            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff' },
            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }

            //{ test: /\.png$/, loader: 'url-loader?limit=100000' },
            //{ test: /\.jpg$/, loader: 'file-loader' }
        ],

        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NoErrorsPlugin()
        ]
    },

    postcss: [
        require('autoprefixer-core')
    ],

    devtool: 'source-map'
}
;

  • Können Sie bitte mitteilen, wo Sie Webpack in die Knotendatei einfügen? Das wäre hilfreich.

    – Ateev Chopra

    8. Dezember 2015 um 7:22 Uhr

  • Ich bin mir nicht sicher, ob ich Ihre Frage richtig verstanden habe, aber wenn ja, fügen Sie kein Webpack zu Ihrer Hauptknotendatei hinzu. Webpack konvertiert Ihre Knotendatei, aber Sie müssen keinen Webpack-Code darin einfügen. Sie konvertieren die Datei einfach über die Webpack-Befehlszeile, bevor Sie Ihre Hauptdatei mit node. In meinem Fall habe ich das Ganze durch Tippen ausgeführt npm start debugMode. deugMode war ein Skript, das ich erstellt habe, um alles für mich zu erledigen, hier ist ein Teil meines package.json Code: tinyurl.com/tldrsudo

    – SudoPlz

    9. Dezember 2015 um 13:09 Uhr

  • Mann, das ist die Art von Magie, die ich liebe. Dieses kleine nodeModules-Ding hat mir den Tag versüßt.

    – Eldelshell

    12. Februar 2016 um 20:33 Uhr

  • Ich habe meine Antwort aktualisiert, um die Dateinamen jeder Datei aufzunehmen. Ich hoffe, das hilft.

    – SudoPlz

    25. April 2016 um 18:04 Uhr

  • @SudoPlz vielen Dank für das Hinzufügen der Dateinamen. Jetzt arbeiten Webpack und Express zusammen. Sie rocken, mein Herr!!

    – tet

    26. April 2016 um 3:22 Uhr

Dies kann durch die Angabe von “node” realisiert werden Option “Ziel”.seit v1.10.2.

Als Referenz: http://jlongster.com/Backend-Apps-with-Webpack–Part-I

Wenn Sie den Code des Servers und des Clients gleichzeitig bündeln möchten, können Sie auf folgende Weise mehrere Konfigurationen verwenden.

// webpack.config.js

module.exports = [
    {
        name: 'server',
        entry: './src/server/index.js',
        target: 'node',
        output: {
            path: __dirname + '/dist/server',
            filename: 'bundle.js',
        },
    },
    {
        name: 'client',
        entry: './src/client/index.js',
        // target: 'web', // by default
        output: {
            path: __dirname + '/dist/client',
            filename: 'bundle.js',
        },
    }
];

  • Haben Sie eine Quelle für die Verwendung mehrerer Konfigurationen in einer einzigen Datei? Ich konnte es in den Webpack-Dokumenten nicht finden und es funktioniert bei mir nicht.

    – picardo

    15. September 2015 um 0:13 Uhr

  • Obwohl ich keine Dokumente finden konnte, existiert ein Beispiel im Repository: github.com/webpack/webpack/tree/master/examples/multi-compiler

    – meta2

    4. Oktober 2015 um 13:13 Uhr

  • Immer noch fehlgeschlagen für mich beim Versuch, die zu laden express/lib/view.js Abhängigkeit (the request of a dependency is an expression @ ../~/express/lib/view.js 78:29-56)

    – Marco Lazzeri

    16. März 2016 um 0:32 Uhr

  • Alles funktioniert für mich, aber als ich Need Express einführte, gibt mir Webpack jetzt eine Menge Fehler. Das löst es. Jetzt positiv bewertet

    – Alexander

    17. Januar 2017 um 4:10 Uhr

Benutzer-Avatar
Ben

Ich verdeutliche nur die Antwort von @meta2, weil ich glaube, dass sie verständlicher geschrieben werden kann – obwohl alle Punkte für ihn gelten!

tl;dr – einstellen target: 'node' in deiner webpack.config.js um die Fehler zu beheben, die bei der Verwendung von Webpack mit Express generiert werden.

Sie erhalten weiterhin Warnungen wie:

WARNING in ./node_modules/express/lib/view.js 
81:13-25 Critical dependency: the request of a dependency is an expression

Um diese zu beheben, verwenden Sie https://github.com/liady/webpack-node-externals. FYI – dies reduziert Ihre Bündelgröße erheblich (überprüfen Sie die Größe vorher und nachher) und beschleunigt die Bündelungszeit unglaublich.

Vollständiges Beispiel:

const path = require('path')
const nodeExternals = require('webpack-node-externals')

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  target: 'node',   // THIS IS THE IMPORTANT PART
  externals: [nodeExternals()],
  mode: 'development'
}

Wenn Sie mit Typescript arbeiten, stellen Sie außerdem sicher, dass Sie auch die Erweiterung „.js“ in Ihre Konfiguration aufnehmen:

module.exports = {
   entry: './src/server/index.ts',
   target: 'node',
   output: {
      path: __dirname + '/dist/server',
      filename: 'bundle.js',
   },        
   resolve: {
      modules: [
         "node_modules"
      ],
      extensions: [".ts", ".js"]
   }
};

Benutzer-Avatar
jogarcia

Ich habe einen einfachen Ansatz gewählt, der in einem kleinen oder mittleren Projekt nützlich sein könnte. Ich mache es so, dass Webpack als Bundler für Ecma-Skript und Scss dient, obwohl ich bei diesem Ansatz kein Hot Reloading verwende.

Die Serverkonfiguration ist die vom Expressgenerator vorgegebene Standardeinstellung.

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./resources/index.js",
  output: {
    path: path.join(__dirname, "/public/dist"),
    publicPath: "/public/dist",
    filename: "main.js"
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  }
};

package.json ist devDependencies

"devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9"
  }

package.json sind Skripte

"scripts": {
    "start": "node ./bin/www",
    "dev": "nodemon",
    "build": "webpack",
    "watch": "webpack --watch"
  },

Benutzer-Avatar
Abdulhakim

Hier ist ein einfaches Setup zum Erstellen einer Express+Webpack-App. Achten Sie bitte auf package.json Datei scripts Teil, der gleichzeitig Express-Server und Webpack-Prozess startet.

Und achten Sie bitte auch darauf server.js Datei "app.use(express.static('dist'));" Teil. Äußern static sollte auf den Webpack-Ordner verweisen, der enthält index.html und bundle.js

Projektordnerstruktur

server.js-Datei:

const express = require ("express");
const path = require ("path");

const app = express();

app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(express.static('dist'));

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
})

const server = app.listen (process.env.PORT || 4000);
const portNumber = server.address().port;
console.log("ГОСПОДИН ПОРТ СЕИЧАС ОТКРЫТ "+ portNumber);

jetzt package.json-Datei:

{
  "name": "firebase1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "server": "node server.js",
    "dev": "concurrently --kill-others-on-fail \"npm run build\" \"npm run server\""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.64.0",
    "webpack-cli": "^4.9.1"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

Jetzt die Datei webpack.config.js:

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  watch: true
}

Und schließlich die Datei index.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FIREBASE PROJECT OF MY LORD TOM AND JERRY</title>
  </head>
  <body>
    <h1>Getting Started with Firebase</h1>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

1054490cookie-checkWie kann ich Webpack mit Express verwenden?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy

Contact - Terms and Conditions - Privacy Policy