Why doesn't webpack-dev-server create the boundle specified in the output object?

Question

webpack

Hello. Here is my webpack config:

var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    //watch: true,
    context: __dirname + '/frontend',
    entry: {
        main: './main',
        styles: './styles/app'
    },
    output: {
        path: __dirname + '/public',
        publicPath: '/',
        filename: '[name].js'
    },
    resolve: {
        extensions: ['.js', '.less']
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'less-loader']
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('styles.css'),
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        contentBase: __dirname + '/public',
        hot: true
    }
};

If I type webpack, everything is collected and dumped into the public folder, as specified in the output settings, if I type webpack-dev-server, everything is also collected, but there is nothing in public, how to understand this? Webpack, on the other hand, shows all the chunks assembled during the build process, including css and js, but in reality they are not in the public folder. Help me to understand.

Answer 1

I think that you have already figured it out, but nevertheless I will answer. The thing is that webpack-dev-server initially should not create any files on disk, since it keeps them in RAM.