Webpack/node.js build, is it possible for webpack-dev-server to serve files to my public directory?

Question

I currently have a node/express app that runs at localhost:8080, I have a webpack build that compiles stuff to my 'public' directories in that project correctly.

I would like to use webpack-dev-server to automagically watch and compile files on the fly for me, instead of using the 'watch' property of webpack.

When I start the dev server is starts at:

localhost:8081

and my node app is at:

localhost:8080

my assets for the node app are pulled from:

localhost:8080/public/css/main.css
localhost:8080/public/js/main.build.js

I want to know whether its possible for the webpack-dev-server to server files from here instead? At the moment I can get to:

localhost:8081/public/js/main.css

but this isn't where my express server reads assets from...help, much appreciated.

EDIT: webpack.config.js below, nothing too special here hopefully

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

const extractSass = new ExtractTextPlugin({
    filename: "./../sql-app/public/css/main.css",
    disable: process.env.NODE_ENV === "development"
});

module.exports = {
    entry: ['./src/js/app.js','./src/scss/main.scss'],
    output: {
        filename: './../sql-app/public/js/build.min.js',
        sourceMapFilename: '[file].map'
    },
    devtool: 'source-map',
    watch: (process.env.NODE_ENV !== 'staging' && process.env.NODE_ENV !== 'production') ? true : false,
    module: {
        loaders: [{
            test: /\.js[x]?$/,
            loaders: ['babel-loader?presets[]=es2015'],
            exclude: /(node_modules|bower_components)/
        }, {
            test: /\.woff$/,
            loader: "url-loader?limit=10000&mimetype=application/font-woff&name=[path][name].[ext]"
        }, {
            test: /\.woff2$/,
            loader: "url-loader?limit=10000&mimetype=application/font-woff2&name=[path][name].[ext]"
        }, {
            test: /\.(eot|ttf|svg|gif|png)$/,
            loader: "file-loader"
        }],
        rules: [{
            test: /\.scss$/,
            use: extractSass.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }],
                // use style-loader in development
                fallback: "style-loader"
            })
        }]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            'jQuery': 'jquery',
            'window.jQuery': 'jquery',
            'global.jQuery': 'jquery'
        }),
        extractSass
    ],
    resolve: {
        alias: {
            'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
        }
    }
};

Answer 1

You can add the below similar code in your webpack.config.js

entry: './src/entry.js',
output: {
    path: path.join(__dirname, 'src/dist'),
    filename: 'bundle.js',
    publicPath: '/'
},
devServer: {
    contentBase: path.join(__dirname, 'src/dist'),
} 

As I can see one problem in your code [It will work, but not the right approach]

filename: './../sql-app/public/js/build.min.js'

It should be just a file name instead of any relative/absolute path. It needs to be fixed to get the correct configuration which watches any changes & reloads the browser automatically.

Here is the link for your reference: https://stackoverflow.com/a/47658586/1681972