Not able to locate webpack's build folder

Question

I just started using webpack for developing React applications. My config file is as follows,

var webpack = require('webpack');

module.exports = {
  devtool: "eval",
  entry: {
    app: [
      "webpack-dev-server/client?http://0.0.0.0:8080",
      "webpack/hot/only-dev-server",
      "./src/scripts/main.js"
    ]
  },
  output: {
    path: "./build",
    filename: "bundle.js"
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  resolve: {
    modulesDirectories: ['node_modules'],
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: "react-hot!babel",
        exclude: /node_modules/
      },

      {
        test: /\.css$/,
        loader: "style!css"
      },

      {
        test: /\.(html|png)$/,
        loader: "file?name=[path][name].[ext]&context=./src"
      }
    ]
  }
};

As specified in config file all the required sources will get bundled into file ./build/bundle.js Also when I am running webpack's dev server using following command,

> webpack-dev-server --colors --content-base ./build

It gives me following output at the beginning with no errors,

http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from /Users/xyz/Desktop/pqrProj/build

I can see my app running as expected on http://localhost:8080/webpack-dev-server/ But when I try to CD into the /Users/xyz/Desktop/pqrProj/build, I get an error as no such file or directory.

Answer 1

When using webpack-dev-server your bundled files are served up from memory and not written to disk for faster iteration while you are developing. This is also allows hot module replacement and such.

If you want to output static files you can use the webpack command from the command line (not webpack-dev-server).

Answer 2

In latest versions of Webpack with writeToDisk option of devServer object in webpack config, you can save the files locally when webpack dev server is running.

 devServer: {
        ...,
        writeToDisk: true,
        ...,
            }

ℹ️ Also If you want webpack-dev-server to write files to the output directory during development, you can force it with the writeToDisk option or the write-file-webpack-plugin.

copy-webpack-plugin would be useful to handle this kind of issues.