webpack-cli v4 beta feedback and changes #1222
Description
About v4
With webpack-cli v4 we will support only webpack v5 and possibly v4 but not officially, so if there are any problems we suggest to use v3.* if you still want to keep the best compatibility.
We dropped Node.js 8 from our CI. We support at least Node.js 10.
What's changing
Less arguments
We drastically reduced the number of arguments that we support. This is because we think most of them are not used by anyone (or used inside a configuration file). Run
webpack --helpTo check the arguments supported.
If you think that we wrongly removed an argument that you thought it was useful, please leave a comment here and we can discuss its implementation. (add a 👍 if someone already requested an argument you need)
.webpack folder support
The CLI now supports the .webpack folder by default. This feature is still in beta so it would be great if people could start using it. Files that are automatically imported:
.webpack/webpack.config.dev.webpack/webpack.config.prod.webpack/webpackfilewebpack.config
Changed default output
We wanted to change a bit the output emitted via CLI.
✅ Compilation Results
🌏 Version: 5.0.0-beta.12
⚒️ Built: Wed Feb 12 2020 09:05:53 GMT+0100 (Central European Standard Time)
⏱ Compile Time: 265ms
📂 Output Directory: /Users/***/www/webpack-cli/test/entry/defaults-index/dist
#️⃣ Hash: 0b145a012a5ce8805b14
┌────────────┬───────────────────────────────┐
│ Entrypoint │ Bundle │
├────────────┼───────────────────────────────┤
│ main │ Bundle Name │ main.js │
│ │ Compared For Emit │ true │
│ │ Bundle size │ 0.00 kb │
│ │ │
│ │ Modules: │
│ │ ./index.js [size: 1 bytes] │
└────────────┴───────────────────────────────┘Don't worry, you can still go to the old output using the --standard flag.
Arguments --dev and --prod
Now you can pass the mode to the compiler using these two simple arguments.
Help for single arguments
Running the following command
webpack help --devWill output
Usage: webpack --dev
Description: Run development build
Documentation: https://webpack.js.org/concepts/#mode
Activity
t-fritsch commentedon Feb 13, 2020
Hello,
I tested beta2 unintentionally with my students very quickly 2 days ago (In fact I didn't notice until they told me that the options I asked them to use were throwing errors, when I realized 4.0.0-beta2 had just been published I told them to downgrade to make my exercise work ! 😄 )
Not a big deal but even if I understand the point of having clean and concise
--devand--prodoptions, I think the--mode=option better matches the way it works in configuration file and is more straightforward when you already know configuration file. Just my 2 cents, but I'm not sure a breaking change in this area is really useful ?Anyway, thanks for the great work here 👏
jhnns commentedon Feb 14, 2020
Hey ho 👋
Removing some of the flags is a good idea 👍
But there are two features I really use a lot that are currently not implemented in v4:
Passing
--env: I personally don't like to split the configuration into separate files since it becomes very hard to understand what the final configuration is going to be. I respect that some people prefer to split the configuration but I think that the webpack-cli should also support single-file configurations. And for single-file configs, the--envfeature is really nice. This has already been requested in Unknown argument: --env #1216.Using TypeScript in webpack configs: If I try to run
webpackwith awebpack.config.tsit currently throws an error:The
configModuleinConfigGroup.prototype.requireConfiglooks like this:Is this a bug or are you planning to drop support for TypeScript configs? Using TS in webpack configs is really nice because of Intellisense and type checking.
I'm going to present both features in my upcoming talk next week at the Frontend Developer Love Conference in Amsterdam and I don't want to advertise deprecated features 😁.
jpreynat commentedon Feb 20, 2020
Hi,
Following @jhnns message, using a file
webpack.config.babel.jsalso leads to an error after switching from webpack 3 to the 4.0.0-beta.3:Error: Cannot find module 'babel-register'Are support for babel and typescript been made opt-in using peer-dependencies?
It seems that switching to
.mjsworks, but it would be great to know what we can/can't do with the new beta.Thanks in advance.
ematipico commentedon Feb 22, 2020
Seamless support for typescript and babel is not deprecated, it was a bug. We're working on restoring these features :)
exKAZUu commentedon Mar 2, 2020
@ematipico
4.0.0-beta.7doesn't work well due toError: Cannot find module '@webpack-cli/logger'. The published@webpack-cli/[email protected]package seems to contain nolibdirectory as follows:ematipico commentedon Mar 2, 2020
Thank you @exKAZUu , I will check this out
ematipico commentedon Mar 2, 2020
@exKAZUu the latest beta should work now!
exKAZUu commentedon Mar 3, 2020
Confirmed. Thanks!
chumbalum commentedon May 14, 2020
I second @jhnns comment on the --env parameter. It's pretty handy for single file configs and should be kept in my opinion.
mstssk commentedon May 25, 2020
4.0.0-beta.8does not fails when errors occur in loaders.For example:
ts-loaderraise a error when compiling wrong typescript code, however webpack returns exit code 0.alexander-akait commentedon May 25, 2020
@mstssk Can you open a new issue with reproducible test repo?
mstssk commentedon May 25, 2020
@evilebottnawi Thank you. I wrote #1581
criles25 commentedon May 26, 2020
I am trying to write my
webpack.config.jsas a function, e.g.,but the v4 beta doesn't seem to recognize it. Does this syntax no longer work?
i was wanting to read env vars in my webpack config file, is there some other way to get access to env vars in the config?
also, i'm enjoying the new features. the
webpack serveis working great, and the--prodflag if helpful. thanks.alexander-akait commentedon May 26, 2020
/cc @webpack/cli-team Need to add test with config like a function
18 remaining items
alexander-akait commentedon Aug 10, 2020
We will try to do the next release on this week
eamodio commentedon Sep 2, 2020
Any update on a new beta release?
alexander-akait commentedon Sep 2, 2020
@webpack/cli-team friendly ping, we need to finish PRs
billyjanitsch commentedon Sep 23, 2020
Please, please reconsider having
webpack-clidepend directly on@webpack-cli/init(#1609). The latter is an enormous module with so many dependencies (particularly jscodeshift, which is huge and very outdated). This doesn't affect bundle size, of course, but it does affect install time and npm's ability to dedupe modules. Plus, the init functionality is only useful when initializing a project, and most projects probably don't use it to initialize themselves anyway.This issue came up back when webpack v4 was in beta. There's nothing wrong with
@webpack-cli/initexisting, butwebpack-cliis currently required to invoke webpack via CLI and it would be really nice to have some way of doing this without bringing in half of the npm registry. All that most people need is to be able to add a simple build script to package.json. webpack-cli v3 did the right thing by including only this minimal core.In an empty project,
npm install webpack-cli@next(4.0.0-rc.0) currently installs 82mb of dependencies (!) whereasnpm install webpack-cli@3only installs 6mb.alexander-akait commentedon Sep 24, 2020
@billyjanitsch Are you sure about
82mb? https://arve0.github.io/npm-download-size/#webpack-cli@nextbillyjanitsch commentedon Sep 24, 2020
@evilebottnawi that website is only tracking the size of direct dependencies. For example, it shows
12.11 MiBbut if you click on@webpack-cli/init @ 1.0.1-rc.0 -- 11.3 MiB (606 deps)it shows19.44 MiB, and so on, recursively.Try this:
You get:
alexander-akait commentedon Sep 24, 2020
@billyjanitsch can you run
npm ls? and put it here?billyjanitsch commentedon Sep 24, 2020
@evilebottnawi yes, no problem:
Expand
mwmcode commentedon Oct 12, 2020
Can we have the default folder name as
webpackinstead of.webpack?Webpack config is an important part of any app that uses it, so we should (IMHO) use a not-dotted folder them so they're not hidden by the OS.
alexander-akait commentedon Oct 12, 2020
@mustafawm you can use any directory name and use
require/import, I want to close this issue, because we done webpack-cli v4 and want to focus on fixing bugsdmurvihill commentedon Oct 23, 2020
--devand--prodare nice, but since--envhas been removed what do you suggest for projects that have more than two configurations (for instance, I need--staging)anshumanv commentedon Oct 23, 2020
Hi @dmurvihill, we added
envback since it was requested by quite a lot of folks.You can do
--env environment=stagingand read it in your configconst { environment } = envAlonMiz commentedon Nov 1, 2020
my suggestion is not to have staging config at all. the staging config should be prod.
i know that sounds strict but staging should be compiled the same way as prod.
in most of my use cases i've seen, this assumption can work as we can inject the ENV=staging in the runtime of the server (eg. nginx), so that we have ONE SINGLE docker image that holds our service serving those static files, both for prod and for staging. while injecting the env staging to that docker will inject env=staging to the main html, then you can use config to distinguish these envs.
having the same image for both staging/local/prod is a great advantage for consistency and testability