Webpack-dev-server: writeToDisk doesn't work with multiple targets

Created on 22 May 2020  路  9Comments  路  Source: webpack/webpack-dev-server

webpack version: 4.43.0
webpack-cli version: 3.3.11
webpack-dev-server version: 3.11.0
Node.js version: 14.0.0
Operating System: MacOS 10.14.6

  • [x] This is a bug

If you have a webpack.config.js that exports multiple targets, e.g:

module.exports = [rendererConfig, mainConfig];

And you set this in one of them:

  devServer: {
    writeToDisk: true,
  },

Then no files are written to disk - the behaviour is identical to not setting it. If you add that setting to both targets then it correctly writes everything out to disk. But I would have expected that you can set that option in different targets separately.

Expected Behavior

It should write files to disk.

Actual Behavior

It does not write files to disk.

For Bugs; How can we reproduce the behavior?

Run webpack-dev-server with multiple targets, only one of which has writeToDisk set.

Most helpful comment

I'm seeing the same issue. I've created a repo and steps to reproduce to help demonstrate the problem: https://github.com/JohnStarich/webpack-multi-writeToDisk

Here are the configs for convenience:

webpack.config.js:

module.exports = [
  require('./webpack.config.ui.js'),
  require('./webpack.config.api.js'),
]

webpack.config.ui.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/ui/index.js',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 9000
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Hello webpack',
    }),
  ],
};

webpack.config.api.js:

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/api/index.js',
  target: 'node',
  devServer: {
    writeToDisk: true,
  },
  output: {
    path: path.resolve(__dirname, 'dist', 'api'),
  },
};

All 9 comments

Please provide full configurations

I can't unfortunately (it's for a closed source app). Do you have a test config that has multiple targets somewhere?

@Timmmm Yes, and all works fine, please provide minimum configuration, we don't need you full configuration

I'm seeing the same issue. I've created a repo and steps to reproduce to help demonstrate the problem: https://github.com/JohnStarich/webpack-multi-writeToDisk

Here are the configs for convenience:

webpack.config.js:

module.exports = [
  require('./webpack.config.ui.js'),
  require('./webpack.config.api.js'),
]

webpack.config.ui.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/ui/index.js',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 9000
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Hello webpack',
    }),
  ],
};

webpack.config.api.js:

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/api/index.js',
  target: 'node',
  devServer: {
    writeToDisk: true,
  },
  output: {
    path: path.resolve(__dirname, 'dist', 'api'),
  },
};

I also noticed a separate issue: For some reason, setting the ui's devServer.contentBase and output.path to dist/ui failed to serve the UI entirely. Very strange, though not a big deal since I can make do with the default output path.

@JohnStarich contentBase and dist/ui are difference things, contentBase for public static assets, dist for webpack output, don't forget webpack output serve from memory

Got it, thanks for clarifying!

For the devServer.writeToDisk issue, are there any issues with the above configs?
Let me know if there鈥檚 anything I can do to help 馃憤

For the devServer.writeToDisk issue, are there any issues with the above configs?

No issues :smile:

@evilebottnawi

How exactly webpack-dev-server handle webpack.config.js with multiple configs(different devServer config). We need more documentation about.

Like:

// webpack.config.js
module.exports = [
  {
    devServer: {
      port: 1234,
      publicPath: '/'
    }
  },
  {
    devServer: {
      port: 5678,
      publicPath: '/test/'
    }
  },
  {
    // don't want to use devServer
    devServer: false,
    target: 'node'
  }
];
Was this page helpful?
0 / 5 - 0 ratings

Related issues

nikirossi picture nikirossi  路  3Comments

gimmi picture gimmi  路  3Comments

mischkl picture mischkl  路  3Comments

uMaxmaxmaximus picture uMaxmaxmaximus  路  3Comments

StephanBijzitter picture StephanBijzitter  路  3Comments