title: Backend API server Typescript/Webpack build : Module not found: Error: Can't resolve
body: <p>I get a list of errors when building my TS app. I guess they are Webpack error , but I don't see how to solve them...</p>
  
  <pre><code>ERROR in ./~/errorhandler/index.js
  Module not found: Error: Can't resolve 'fs' in '/Users/yves/Developments/IDEALCOMS/project/api_cockpit/node_modules/errorhandler'
  
  ERROR in ./~/serve-favicon/index.js
  Module not found: Error: Can't resolve 'fs' in '/Users/yves/Developments/IDEALCOMS/project/api_cockpit/node_modules/serve-favicon'
  
  ERROR in ./~/etag/index.js
  Module not found: Error: Can't resolve 'fs' in '/Users/yves/Developments/IDEALCOMS/project/api_cockpit/node_modules/etag'
  
  ERROR in ./~/express/lib/request.js
  Module not found: Error: Can't resolve 'net' in '/Users/yves/Developments/IDEALCOMS/project/api_cockpit/node_modules/express/lib'
  
  ERROR in ./~/express/lib/view.js
  Module not found: Error: Can't resolve 'fs' in '/Users/yves/Developments/IDEALCOMS/project/api_cockpit/node_modules/express/lib'
  
  ERROR in ./~/send/index.js
  Module not found: Error: Can't resolve 'fs' in '/Users/yves/Developments/IDEALCOMS/project/api_cockpit/node_modules/send'
  
  ERROR in ./~/destroy/index.js
  Module not found: Error: Can't resolve 'fs' in '/Users/yves/Developments/IDEALCOMS/project/api_cockpit/node_modules/destroy'
  
  ERROR in ./~/mime/mime.js
  Module not found: Error: Can't resolve 'fs' in '/Users/yves/Developments/IDEALCOMS/project/api_cockpit/node_modules/mime'
  </code></pre>
  
  <p><strong>webpack.config.common.js</strong></p>
  
  <pre><code>var webpack = require('webpack');
  
  module.exports = {
    entry: {
      'app': './src/index.ts'
    },
  
    resolve: {
      extensions: ['.js', '.ts']
    },
  
    module: {
      loaders: [
        {
          test: /\.ts$/,
          loaders: 'ts-loader'
        },
        {
          test: /\.html$/,
          loader: 'html-loader'
        },
        {
          test: /\.css$/,
          loader: 'raw-loader'
        }
      ]
    },
    plugins: []
  };
  </code></pre>
  
  <p><strong>webpack.config.dev.js</strong></p>
  
  <pre><code>const path = require('path');
  
  var webpack = require('webpack');
  var webpackMerge = require('webpack-merge');
  var commonConfig = require('./webpack.config.common.js');
  
  var env = require('./env.json');
  
  module.exports = webpackMerge(commonConfig, {
  
    devtool: 'cheap-module-eval-source-map',
  
    output: {
      path: path.resolve(__dirname, 'dist'),
      publicPath: "/js/app/",
      filename: 'bundle.js',
      chunkFilename: '[id].chunk.js'
    },
  
    plugins: []
  
  });
  </code></pre>
  
  <p><strong>UPDATE</strong> ===========================</p>
  
  <p>I found a solution after reading the blog post : <a href="http://jlongster.com/Backend-Apps-with-Webpack--Part-I" rel="nofollow noreferrer">Backend Apps with Webpack</a></p>
  
  <p><strong>webpack.config.dev.js</strong></p>
  
  <pre><code>const path = require('path');
  var fs = require('fs');
  
  var webpack = require('webpack');
  var webpackMerge = require('webpack-merge');
  var commonConfig = require('./webpack.config.common.js');
  
  var nodeModules = {};
  fs.readdirSync('node_modules')
    .filter(function(x) {
      return ['.bin'].indexOf(x) === -1;
    })
    .forEach(function(mod) {
      nodeModules[mod] = 'commonjs ' + mod;
    });
  
  module.exports = webpackMerge(commonConfig, {
  
    devtool: 'cheap-module-eval-source-map',
  
    output: {
      path: path.resolve(__dirname, 'build'),
      filename: 'backend.js',
      chunkFilename: '[id].chunk.js'
    },
    externals: nodeModules,
  
    plugins: [
      new webpack.IgnorePlugin(/\.(css|less)$/),
      new webpack.BannerPlugin('require("source-map-support").install();',
        { raw: true, entryOnly: false })
    ]
  
  });
  </code></pre>