Webpack: use just some entry points with dev server

Question

I have pretty complex webpack configuration and for development I need to use just few entry points thru webpack-dev-server. Rest will be compiled into filesystem as usual. Is there any way how to do this or I need to have 2 webpack configs and run them separately.

simple example

{
  entry: {
    // Deliver this with dev server
    app: "../index.js",
    admin: "../admin.js",

    // Deliver this with default compilation into file system
    some_css: "../static.css",
    other_css: "../other.css"
  }
}

Thanks

Answer 1

The best and most clean solution is to create two different configs for Dev and Prod:

- webpack.config.js
- webpack.production.config.js

In webpack.config:

entry: [

    // For hot style updates
    'webpack/hot/dev-server',

    // Our application
    // whatever file you need
    mainPath
]

And in your production:

devtool: 'source-map',
entry: mainPath,
output: {
  path: buildPath,
  filename: 'bundle.js'
}

Surely they are other ways like checking the environment variables like this:

var isProduction = process.env.NODE_ENV === 'production';

And then you can use that in your config, however, you said your config is already complex to don't make it more complex.

UPDATE:

If you just want to have multiple entries:

{
    entry: {
        a: "./index",
        b: "./admin",
        c: ["./c", "./d"]
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].entry.js"
    }
}