search

webpack / webpack-cli

Webpack's Command Line Interface
https://webpack.js.org/api/cli
MIT License
2.57k stars 602 forks source link

Serve command not passing webpack `devServer` config to webpack-dev-server #1469

Closed lukereative closed 4 years ago

lukereative commented 4 years ago

Describe the bug

Serve command not passing webpack devServer config to webpack-dev-server

webpack.dev.js

  devServer: {
    https: isUsingHTTPS && secureLocalDomain,
    host: "myreactapp.test",
    hot: true,
    port: 8080,
    publicPath: "/myreactapp",
    quiet: true,
    proxy: {
      '**': {
        target: localURL,
        secure: false,
        headers: {
          'X-Dev-Server-Proxy': localURL
        }
      }
    }
  }

command used

webpack serve --config webpack.dev.js

What is the current behavior?

The webpack server runs but doesn't pick up all the options from the devServer config. You can see this by webpack output being undefined in the CLI output, but also the proxy was also not working.

ℹ ｢wds｣: Project is running at http://myreactapp.test:8080/
ℹ ｢wds｣: webpack output is served from undefined
ℹ ｢wds｣: Content not from webpack is served from /path/to/my/reactapp

To Reproduce

Relevant entries from package.json

"@webpack-cli/serve": "^1.0.1-alpha.5",
"webpack": "^5.0.0-beta.13",
"webpack-cli": "^4.0.0-beta.8",

Steps to reproduce the behavior:

  1. Define a devServer config in your webpack config file
  2. Run webpack serve --config webpack.dev.js

Expected behavior

Previously the dev server would pick up devServer config object from your webpack config file

Additional context

If I change line 28 from startDevServer.ts it works as expected but obviously this ignores the cli overrides.

- const server = new Server(compiler, options);
+ const server = new Server(compiler, devServerOptions);

CLI output

ℹ ｢wds｣: Project is running at http://myreactapp.test:8080/
ℹ ｢wds｣: webpack output is served from /eccreactapp/dist
ℹ ｢wds｣: Content not from webpack is served from /path/to/my/reactapp
anshumanv commented 4 years ago

Taking a look, thanks for the report!

anshumanv commented 4 years ago

Found the issue, will fix in a bit. 👍

anshumanv commented 4 years ago

Issue - devServer config was never passed fully to the server.

anshumanv commented 4 years ago

@evilebottnawi even after passing clientLogLevel: "none" or silent in server config, I'm still seeing logs, this should not be the case right? 

 ✘  ~/Code/tests  webpack-cli serve --config webpack.config.js
{ liveReload: true,
  serveIndex: true,
  inline: true,
  clientLogLevel: 'silent',
  host: 'localhost',
  port: 1234,
  publicPath: '/',
  hot: true,
  proxy:
   { '**': { target: 'test', secure: false, headers: [Object] } } }
ℹ ｢wds｣: Project is running at http://localhost:1234/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Code/tests
⚠ ｢wdm｣: Hash: d28daed123b499d6b1b7
Version: webpack 4.42.1
Time: 350ms
Built at: 04/16/2020 9:51:46 AM
  Asset     Size  Chunks             Chunk Names
main.js  155 KiB       0  [emitted]  main
Entrypoint main = main.js
 [1] ../GitHub/webpack-cli/node_modules/webpack/hot/log.js 1.34 KiB {0} [built]
 [4] ../GitHub/webpack-cli/node_modules/webpack-dev-server/client/utils/log.js 964 bytes {0} [built]
 [5] ../GitHub/webpack-cli/node_modules/webpack/hot/emitter.js 75 bytes {0} [built]
 [6] multi ../GitHub/webpack-cli/node_modules/webpack-dev-server/client?http://localhost:1234 ../GitHub/webpack-cli/node_modules/webpack/hot/dev-server.js ./index.js 52 bytes {0} [built]
 [7] ../GitHub/webpack-cli/node_modules/webpack-dev-server/client?http://localhost:1234 4.29 KiB {0} [built]
 [8] ../GitHub/webpack-cli/node_modules/webpack-dev-server/node_modules/strip-ansi/index.js 161 bytes {0} [built]
[10] ../GitHub/webpack-cli/node_modules/webpack-dev-server/client/socket.js 1.53 KiB {0} [built]
[13] ../GitHub/webpack-cli/node_modules/webpack-dev-server/client/overlay.js 3.51 KiB {0} [built]
[19] ../GitHub/webpack-cli/node_modules/webpack-dev-server/client/utils/sendMessage.js 402 bytes {0} [built]
[20] ../GitHub/webpack-cli/node_modules/webpack-dev-server/client/utils/reloadApp.js 1.59 KiB {0} [built]
[22] ../GitHub/webpack-cli/node_modules/webpack-dev-server/client/utils/createSocketUrl.js 2.91 KiB {0} [built]
[31] ../GitHub/webpack-cli/node_modules/webpack/hot sync nonrecursive ^\.\/log$ 170 bytes {0} [built]
[32] ../GitHub/webpack-cli/node_modules/webpack/hot/dev-server.js 1.59 KiB {0} [built]
[33] ../GitHub/webpack-cli/node_modules/webpack/hot/log-apply-result.js 1.27 KiB {0} [built]
[34] ./index.js 19 bytes {0} [built]
    + 20 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
ℹ ｢wdm｣: Compiled with warnings.

Dev server version: webpack-dev-server@3.10.3

alexander-akait commented 4 years ago

@anshumanv yep, because it is logs from server, not from client

anshumanv commented 4 years ago

@anshumanv yep, because it is logs from server, not from client

Yes, But it should pass the devServer object from the config right to DevServer right?

alexander-akait commented 4 years ago

@anshumanv we should get devServer config, override specified CLI flags and send it to dev server

anshumanv commented 4 years ago

@evilebottnawi yep, fix is here - https://github.com/webpack/webpack-cli/pull/1470

lukereative commented 4 years ago

Fix is now here #1649

gabriel-peracio commented 4 years ago

This is a pretty major blocker for my workflow, hope this gets solved soon!

ylemkimon commented 4 years ago

1649 is now merged. I can confirm the issue is fixed with webpack-cli#next and webpack-dev-server#v4.

Johannestegner commented 4 years ago

Will this be released in a new alpha/beta release soon? Would be wonderful to have it working :)

gabriel-peracio commented 4 years ago

I guess we need to wait for #1634?

Kinda weird that #1649 (the PR that fixes this issue) was merged, but has not been part of a release yet. Without #1649, devServer is basically broken (In my use case I need the proxy options, I have resorted to patching webpack)

Johannestegner commented 4 years ago

(In my use case I need the proxy options, I have resorted to patching webpack)

Ya, kinda been considering doing that myself! hehe :)

gabriel-peracio commented 4 years ago

Looks like this was fixed in webpack-cli v4.0.0-beta.9

I can't test it now, but if someone can confirm, we might be able to close this issue. If no one is available, I'll try to find some time to test it.

Johannestegner commented 4 years ago

Tried with latest, sadly, in my case, all webpack (and cli commands) have stopped working:

> cross-env NODE_ENV=development webpack serve

CLI for webpack must be installed.
  webpack-cli (https://github.com/webpack/webpack-cli)

We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no): no
You need to install 'webpack-cli' to use webpack via CLI.
You can also install the CLI manually.

Following packages installed:

    "dependencies": {
        "@babel/runtime-corejs3": "^7.11.2"
    },
    "devDependencies": {
        "@babel/core": "^7.11.6",
        "@jitesoft/babel-preset-main": "^2.5.2",
        "@webpack-cli/serve": "^1.0.1-alpha.5",
        "babel-loader": "^8.1.0",
        "copy-webpack-plugin": "^6.1.1",
        "core-js": "^3.6.5",
        "cross-env": "^7.0.2",
        "css-loader": "^4.3.0",
        "file-loader": "^6.1.0",
        "imagemin-gifsicle": "^7.0.0",
        "imagemin-mozjpeg": "^9.0.0",
        "imagemin-optipng": "^8.0.0",
        "imagemin-svgo": "^8.0.0",
        "imagemin-webp-webpack-plugin": "^3.3.3",
        "imagemin-webpack": "^5.1.1",
        "mini-css-extract-plugin": "^0.11.2",
        "optimize-css-assets-webpack-plugin": "^5.0.4",
        "sass": "^1.26.11",
        "sass-loader": "^10.0.2",
        "style-loader": "^1.2.1",
        "terser-webpack-plugin": "^4.2.2",
        "url-loader": "^4.1.0",
        "webpack": "^5.0.0-rc.0",
        "webpack-cli": "^4.0.0-beta.9"
    }

Haven't had time to look in to it, (just saw that there where a new version out a few min ago and only have time to test quick before fixing food! hehe)...

Edit:

Running on windows 10 pro (latest stable) and have only tested with node built for windows, will try on linux later too and see.
node -v: v14.5.0
npm -v: 6.14.5

alexander-akait commented 4 years ago

You don't need @webpack-cli/serve, it is built-in feature

Johannestegner commented 4 years ago

You don't need @webpack-cli/serve, it is built-in feature

Even without I still get the same errors :/
Will check if I can figure out why when I'm done with food :)

alexander-akait commented 4 years ago

Just note - replace optimize-css-assets-webpack-plugin on https://github.com/webpack-contrib/css-minimizer-webpack-plugin (there are bugs in architecture)

Johannestegner commented 4 years ago

Okay, after deleting node_modules and package files a couple of times and reinstalling and all that fun stuff I now get the following error:

> cross-env NODE_ENV=development webpack-cli serve

[webpack-cli] Promise rejection: TypeError: cli.commandLineArgs is not a function
[webpack-cli] TypeError: cli.commandLineArgs is not a function
    at Object.serve [as default] (D:\Repositories\js\testing-stuff\node_modules\@webpack-cli\serve\lib\index.js:25:31)
    at Function.run (D:\Repositories\js\testing-stuff\node_modules\webpack-cli\lib\commands\ExternalCommand.js:37:51)
    at Command.<anonymous> (D:\Repositories\js\testing-stuff\node_modules\webpack-cli\lib\utils\arg-parser.js:31:73)
    at Command.listener [as _actionHandler] (D:\Repositories\js\testing-stuff\node_modules\webpack-cli\node_modules\commander\index.js:426:31)
    at Command._parseCommand (D:\Repositories\js\testing-stuff\node_modules\webpack-cli\node_modules\commander\index.js:1002:14)
    at Command._dispatchSubcommand (D:\Repositories\js\testing-stuff\node_modules\webpack-cli\node_modules\commander\index.js:953:18)
    at Command._parseCommand (D:\Repositories\js\testing-stuff\node_modules\webpack-cli\node_modules\commander\index.js:970:12)
    at Command.parse (D:\Repositories\js\testing-stuff\node_modules\webpack-cli\node_modules\commander\index.js:801:10)
    at argParser (D:\Repositories\js\testing-stuff\node_modules\webpack-cli\lib\utils\arg-parser.js:132:27)
    at runCLI (D:\Repositories\js\testing-stuff\node_modules\webpack-cli\lib\bootstrap.js:25:24)

It does seem to be kind'a true, the cli.commandLineArgs property is not a function, it actually does not exist in the ../lib/webpack-cli.js file. I'm kinda wondering if something is wrong in the compilation of the script/s?

If you look at the index.ts file in the serve package, it calls the parseArgs method, which is not done in the actual package (which seems to be 1.0.1-alpha.5 when not including it in package file and allowing it to be installed with webpack-cli instead).

Changing to use argParser (which is what happens in the TS files) produces further errors.

Is the package installed with webpack-cli the correct package?

anshumanv commented 4 years ago

Yep this is known, https://github.com/webpack/webpack-cli/issues/1814

Releasing of sub packages should solve this, I think @evilebottnawi / @evenstensberg is already on this

Johannestegner commented 4 years ago

Aah, i see! That's good to hear, just built the latest serve version to test (from the next branch). Other than having to install webpack-dev-server (which I'm guessing is bundled in the 'real' installation) and comment out some of the configuration, it seems to run fine!

So I eagerly await the release of next serve version :)

Edit: Just sucks that NPM seems to be down! ;D

ylemkimon commented 4 years ago

I can confirm that this issue is fixed with webpack@5.0.0-rc.0 and webpack-cli@4.0.0-rc.0.

alexander-akait commented 4 years ago

Let's close, feel free to open a new issue if you faced with the issue again with reproducible test repo