Webpack-dev-server: Where is the dist folder when i work with webpack-dev-server

[kenanyildiz]

I'm using webpack v.3.0.6 version and also webpack-dev-server. When i run the script in console npm run webpack-dev-server command. Its works fine but i couldn't find any dist folder. On the internet in some videos says about where is dist folder, everyone says webpack keeping dist folder in memory. Where is the memory exactly? How to get build-ed dist folder? I know this is the dev-server..

[shellscape]

Please see the issue template regarding support questions.

[Ezugudor]

Hey @Kenanyildiz, I think am a bit late :). But I believe someone may still find it useful. So the webpack-dev-server is just a feature to enhance your speed of development. See it this way, it's just there basically to refresh your browser. What you would have been doing each time you make changes to your files. So even though it does some bundlings, that is solely for its own use and not for you(user). And that's why the build is not made available in your current working directory.

So to answer your question, you still need to run a command to get your "dist" folder. And that is

"npm run build"

So just see webpack-dev-server as for hot-reloading.
And if you need your "dist" anytime, just run "npm run build"

Hope that helps. :-)

[deadhandsignal]

I'm new to coding but have worked in tech for years. I don't understand why people don't just answer the question:
Where is the dist folder???

incredible

[shellscape]

@deadhandsignal there isn't one. https://github.com/webpack/memory-fs

What's the difference between a directory and a folder? That's an important distinction that folks with significant experience in technology should understand.

I don't understand why people don't just answer the question

Because on github there is a decorum. It's not acceptable to remove or ignore an issue or pull request template. Also important.

[UncleVesimir]

Assuming you're running your dev server from /dist in memory, could you not just use your browsers dev tools and view the sources tab? You can see pretty much everything from there! Hope this helps !

[livizy]

I think @kenanyildiz just want to know where “webpack-dev-server” host the content in disk when it is running？so do I.

[RobertChanphakeo]

I think @kenanyildiz just want to know where “webpack-dev-server” host the content in disk when it is running？so do I.

webpack-dev-server runs in memory, If you want to see the files on disk during development you need to run the standard webpack or set writeToDisk to true (https://github.com/webpack/webpack-dev-server/releases/tag/v3.1.10)

devServer: {
  writeToDisk: true
}

[ghost]

I think @kenanyildiz just want to know where “webpack-dev-server” host the content in disk when it is running？so do I.

If you need to see from where webpack is serving the files without writing the content to disk, visit http://localhost:8080/webpack-dev-server on your local.

[CatBakun]

I think @kenanyildiz just want to know where “webpack-dev-server” host the content in disk when it is running？so do I.

webpack-dev-server runs in memory, If you want to see the files on disk during development you need to run the standard webpack or set writeToDisk to true (https://github.com/webpack/webpack-dev-server/releases/tag/v3.1.10)

devServer: {
  writeToDisk: true
}

I needed this to use html5 routing with historyApiFallback and having a dynamic index.html file.

var path    = require('path');
var config  = require('./webpack.config');

config.output = {
  filename: '[name].bundle.js',
  publicPath: '/',
  path: path.resolve(__dirname, 'dist')
};

config.mode = 'development';
config.entry = path.join(__dirname, 'client', 'app', 'app.js');
config.devServer = {
  writeToDisk: true,
  port: 9002,
  hot: true,
  historyApiFallback: true,
  contentBase: './dist'
}

[alexander-akait]

webpack-dev-server by default uses memory-fs, so all files stored in memory for performance reasons, but if you need write some files to real filesystem please read documentation about writeToDisk

[woai3c]

@RobertChanphakeo thanks

[benlieb]

I'm using webpack with Rails+Webpacker and would love to get webpack-dev-server to write to disk, but not having luck.

I'm writing a React-based Chrome extension and using the files generated by the rails webpacker pipeline to then move into a separate distribution folder for the extension, which is then uploaded to the Chrome Store.

The only way I've found to force a write is to call the webpacker:compile rake task. The unfortunate side effect of this is that some of my node libs are quite large as I'm writing a dictionary extension, so the compile step can take 20 seconds or more. So that's 20 seconds between every code change until I'm able to reload the browser in dev mode to see my changes.

I don't need to recompile those libs every time, though, it should seem, since webpack-dev-server is there running and finishes its compile in fractions of a seconds when I make a save.

I would love to access those files directly in dev when reloading my browser. Help!!

There is a config (yml) file for webpack in rails and adding the snake cased equivalent of writeToDisk didn't seem to do anything:

Or maybe I just don't know where to look? Looking in the same location that the other files are written to (packs/js/...)