title: webpack + express + angular 4 error "Error: ENOENT: no such file or directory, stat 'C:\public\index.html'
body: <p>Directory structure of my app -</p>
  
  <pre><code>- Project-root
   - client-side-angular-code // angular 4 code
   - public // generated angular 4 static assets including index.html
   - dist
      - bundle.js //generated bundle file by webpack for express code 
      - public //copied static assets from the ../public to dist/public by webpack
   - app.js //express app
   - webpack.config.js
   - package.json
   - .... other miscellaneous files and folders
  </code></pre>
  
  <p>Using angular "bg build" I am placing all the static assets into the public folder as described above at the root of my project.
  Now using an express app I am able to serve the static assets from public folder via the index.html and works fine when I run "node app.js" and browse to <a href="http://localhost:port" rel="nofollow noreferrer">http://localhost:port</a> 
   relevant code here -</p>
  
  <pre><code>app.use(express.static(path.join(__dirname, 'public')));
  app.get('*', function (req, res) {
  
  
  res.sendFile("./index.html", { root: path.join(__dirname, './public') })
  })
  </code></pre>
  
  <p>But after I bundle the app.js for production deployment along with the remaining static assets in to the dist/public folder(where I am copying the static assets using the "CopyWebpackPlugin", if i try to run "node dist/bundle.js" and try to browse to <a href="http://localhost:port" rel="nofollow noreferrer">http://localhost:port</a> the same way as before, I get following error.</p>
  
  <blockquote>
    <p>Error: ENOENT: no such file or directory, stat 'C:\public\index.html'
        at Error (native)</p>
  </blockquote>
  
  <p>As such I wanted to know why webpack is not taking it relative to where the bundle.js is and/or what am I doing wrong?</p>
  
  <p>Relevant webpack config file</p>
  
  <pre><code>    var path = require("path");
  const webpack = require('webpack');
  var nodeExternals = require('webpack-node-externals');
  var CopyWebpackPlugin = require('copy-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  
      module.exports = {
  
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname,"dist"),
      //path: __dirname + '/dist',
      publicPath : path.resolve(__dirname,"dist/")
    },
      entry: "./app",
      target: 'node',
      module: {
          rules: [
            { test: /\.json/, loader: "json-loader", exclude:/node_modules/,},
            {test: /\.ts(x?)$/, loader: 'babel-loader!ts-loader',exclude: /node_modules/,},
            { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] },
            { test: /\.html$/, loader: 'raw-loader' },
            {
              test: /\.(jsx|js)?$/,
              use: [{
                loader: "babel-loader",
                options: {
                  cacheDirectory: true,
                  presets: ['es2015'] // Transpiles JSX and ES6
                }
              }]
            }
          ],
        },
      resolve: {
          extensions: ['.js', '.ts', '.html', '.css']
      },
      plugins: [
          new CopyWebpackPlugin([
              {from:'public',to:'public'} 
          ]),
          new CleanWebpackPlugin(['dist']),
      ]
  };
  </code></pre>
  
  <p>Here is my package.json entries for version of webpack(not all modules are in use as we can see from the webpack config js above) -</p>
  
  <pre><code> "clean-webpack-plugin": "^0.1.19",
      "copy-webpack-plugin": "^4.5.1",
      "css-loader": "^0.28.11",
      "html-loader": "^0.5.5",
      "html-webpack-plugin": "^3.2.0",
      "raw-loader": "^0.5.1",
      "webpack": "^4.6.0",
      "webpack-cli": "^2.0.15",
      "webpack-dev-middleware": "^3.1.3",
      "webpack-hot-middleware": "^2.22.1",
      "webpack-node-externals": "^1.7.2"
  </code></pre>
  
  <p>Any help or suggestion is much appreciated !!</p>