Come posso usare webpack con express?

Question

Quando provo ad usare webpack con un semplice Server Express Ho sempre ottenere tonnellate di errori: 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')); 
}); 

ho tutti questi errori:

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 

e questo è il mio file di configurazione:

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' 
}; 

Cosa posso fare, ho bisogno di usare webpack sul mio lato server come noi ll.

corro il file express.js in questo modo: ./node_modules/webpack/bin/webpack.js ../app/server/express.js outfile --display-chunks -c --progress -d

Answer 1

Quello che ho finito per fare era ho usato 2 diverse configurazioni, 1 per il confezionamento della roba di server insieme usando webpack, e 1 per il confezionamento tutta la roba del browser insieme e anche eseguire Server dev webpack per il ricaricamento caldo.

Server webpack config alias webpack.node.config.js appare come segue:

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 config alias webpack.browser.config.js appare come segue:

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' 
} 
; 

Answer 2

può essere realizzato specificando "nodo" di "target" option, dal momento che v1.10.2.

Per riferimento: http://jlongster.com/Backend-Apps-with-Webpack--Part-I

Se si desidera raggruppare il server e il codice del cliente, allo stesso tempo, è possibile utilizzare la configurazione multipla nel modo seguente.

// 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', 
     }, 
    } 
];