Comment puis-je utiliser webpack avec express?
Lorsque j'essaie d'utiliser webpack avec un simple express server j'ai toujours des TONNES d'erreurs:
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'));
});
Je reçois toutes ces erreurs:
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
et c'est mon fichier de config:
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'
};
Ce que je peux faire, j'ai besoin d'utiliser webpack sur mon côté serveur en tant que bien.
Je lance le express.js fichier comme suit:
./node_modules/webpack/bin/webpack.js ../app/server/express.js outfile --display-chunks -c --progress -d
- webpack est pour les navigateurs et express est côté serveur, je pense que vous n'avez pas besoin de pack de la définition de votre serveur
- Mais j'ai vu des exemples de personnes qui utilisent webpack pour le côté serveur en tant que bien. Vous voyez que je veux utiliser le même code pour le client et le serveur et profiter de webpacks fonctionnalités.
- Oui. il existe un moyen de réutiliser le code dans les deux côtés, mais express existe pour le traitement de la demande, la distribution de fichiers et peut-être d'autres choses. habituellement, dans le nœud de projets que nous avons deux dossiers différents, un pour le serveur de code et un autre pour le client/les navigateurs. nous appliquons webpack/browserify à la dernière
Vous devez vous connecter pour publier un commentaire.
Ce que j'ai fais, j'ai utilisé 2 configurations différentes, 1 pour l'emballage le serveur des trucs ensemble à l'aide de webpack, et 1 pour l'emballage de tous le navigateur de trucs ensemble et de les exécuter webpack serveur de dev pour chaud de rechargement.
Serveur webpack config aka
webpack.node.config.js
ressemble maintenant à ceci:Navigateur webpack config aka
webpack.browser.config.js
ressemble maintenant à ceci:npm start debugMode
.deugMode
est un script que j'ai créé afin de tout faire pour moi, voici une partie de monpackage.json
code: tinyurl.com/tldrsudoIl peut être réalisé en spécifiant "nœud" à la "cible" option, depuis v1.10.2.
Pour référence: http://jlongster.com/Backend-Apps-with-Webpack--Part-I
Si vous souhaitez intégrer le serveur et le code du client, dans le même temps, il est possible d'utiliser plusieurs de configuration de la manière suivante.
express/lib/view.js
dépendance (the request of a dependency is an expression @ ../~/express/lib/view.js 78:29-56
)Je suis juste clarifier @meta2 de répondre parce que je crois qu'il peut être écrit dans un plus compréhensible - bien que l'ensemble des points à lui!
tl;dr - set
target: 'node'
dans votrewebpack.config.js
pour corriger les erreurs qui se produit lors de l'utilisation de Webpack avec Express.Vous obtenez toujours des avertissements du genre:
De corriger ces, utiliser https://github.com/liady/webpack-node-externals. FYI - ce qui réduit le vous de liasses de manière significative (vérifier la taille avant et après) et des vitesses allant jusqu'au regroupement de temps incroyablement.
Exemple complet: