How can I use webpack with express?

Question

When I try to use webpack with a simple express server I always get TONS of errors: 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')); }); 

I get all those errors:

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 

and this is my config file:

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

What can I do, I need to use webpack on my server side as well.

I run the express.js file like so: ./node_modules/webpack/bin/webpack.js ../app/server/express.js outfile --display-chunks -c --progress -d

Answer 1

What I ended up doing was I used 2 different configurations, 1 for packing the server stuff together using webpack, and 1 for packing all the browser stuff together and also run webpack dev server for hot reloading.

Server webpack config aka webpack.node.config.js now looks like this:

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 aka webpack.browser.config.js now looks like this:

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