webpack Multiple Targets

[sanonz]

Code

// webpack.config.js
module.exports = [
  {
    entry : {
      app: './src/app'
    },
    output: {
      path: path.resolve(__dirname, 'dist/')
      filename: 'assets/js/app.js',
      chunkFilename: `assets/js/${getAssetName('[hash]', '[name]')}.js`
    },
    devServer: {
      hot: true
    }
  },
  {
    entry : {
      app: './src/app.server'
    },
    output: {
      path: path.resolve(__dirname, 'dist/server')
      filename: 'app.js',
      chunkFilename: '[name].js',
      libraryTarget: 'commonjs2'
    },
    target: 'node'
  }
];

Run

npx webpack-dev-server

Expected Behavior

• The client app entry add webpack/hot/only-dev-server webpack/hot/dev-server etc.
• The client app entry add https://github.com/webpack/webpack-dev-server/blob/master/client-src/default/index.js file, from at line: https://github.com/webpack/webpack-dev-server/blob/master/lib/util/addDevServerEntrypoints.js#L23
• The server app entry no add.

Actual Behavior

All added.

For Bugs; How can we reproduce the behavior?

Example edit: https://github.com/webpack/webpack-dev-server/blob/master/lib/util/addDevServerEntrypoints.js#L22

    [].concat(webpackOptions).forEach((wpOpt) => {
+     if (wpOpt.target === 'node') return;
      if (typeof wpOpt.entry === 'object' && !Array.isArray(wpOpt.entry)) {
        Object.keys(wpOpt.entry).forEach((key) => {
          wpOpt.entry[key] = devClient.concat(wpOpt.entry[key]);
        });
      } else if (typeof wpOpt.entry === 'function') {
        wpOpt.entry = wpOpt.entry(devClient);
      } else {
        wpOpt.entry = devClient.concat(wpOpt.entry);
      }
    });

For Features; What is the motivation and/or use-case for the feature?

server side rendering

[sanonz]

Turned out to be such, no add:

// webpack.config.js

{
+    entry: (devClient) => {
+      return {
+        app:  './src/setup.server',
+      };
+    },
    output: {
      path: path.resolve(__dirname, 'dist/server')
      filename: 'app.js',
      chunkFilename: '[name].js',
      libraryTarget: 'commonjs2'
    },
    target: 'node'
  }

The update cannot be used:
f4f14ce#diff-6a9b3dfc5b6956a454f4233ea7a4992cR24

[SpaceK33z]

So for the Node target it shouldn't auto-add the webpack/hot scripts? Seems fair enough I think. However this could potentially be a breaking change to some. Are there any use cases where you would need it to work like before?

[sanonz]

I want to creating isomorphic apps, which contains two webpack configuration files, one for client app and one for server-side app. The server side app runs in a node environment, so the webpack/hot scripts is not required.

[SpaceK33z]

Yes, but I was wondering if there are valid use cases where you do need these webpack/hot scripts in a node environment. If there are none, this isn't really a breaking change. If there are, it might be a breaking change.

[sanonz]

The Node target add https://github.com/webpack/webpack-dev-server/blob/master/client-src/default/index.js file.
The runs in node environment throw error self not defined at line: https://github.com/webpack/webpack-dev-server/blob/master/client-src/default/index.js#L180
Node environment need client code?

[SpaceK33z]

Okay thanks for finding out. Could you make a PR and add a test for this?

[sanonz]

Sorry, I question write wrong. I make PR and test at tomorrow. Thanks!

[sethomas]

+1 I am also experiencing the same thing.

@SpaceK33z what's the status on merging @sanonz PR?

[alexander-akait]

Fixed in #1775