Warnings/errors when following steps in README.md

[bencoveney]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[x] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Hi. Just wanted to say thanks for the awesome project idea. I found this from the html-webpack-plugin README and love the idea of being able to get a webpack build going without any initial set-up work.

There are warnings/errors when following the installation steps in README.md:

• tsconfig.json is missing.
• Incorrect settings in tsconfig.json when instantiating one with tsc --init
• A missing babel configuration file.
• Mode is not passed as a CLI arg.
• src/index.ts file is required - this is shown in the .gif but not stated anywhere else.

I have taken some steps to get an initial working build but I don't know about babel, so will be looking into how to set that up.

Expected behavior

Following the installation steps in the README.md gives a webpack build with no warnings/errors.

Minimal reproduction of the problem with instructions

npm init
npm i --save-dev webpack webpack-cli common-config-webpack-plugin
webpack --plugin common-config-webpack-plugin

This gives the following:

Couldn't find a tsconfig.json in the current working directory.
You can either set the configFile path explicitly or create a new config:
  npx tsc --init
Couldn't find an appropriate babel configuration file in the current directory.
                        Please check if the name of the file is correct and if it's in the correct directory.
                        For further information please check the documentation: https://babeljs.io/docs/en/babelrc.html
Starting type checking service...
Using 1 worker with 2048MB memory limit

Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

Hash: 128e7870f1d9614d6dd9
Version: webpack 4.28.4
Time: 114ms
Built at: 2019-01-16 20:37:32

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/concepts/mode/

ERROR in Entry module not found: Error: Can't resolve './src' in 'G:\Code\webpack-config-plugins'

Okay, so I am missing:

• An entry point
• A typescript config file
• A babel config file

As mentioned, i haven't looked into babel yet. If I create a src/index.ts run tsc --init (assuming I have a global tsc) I get some additional warnings:

ts-config-webpack-plugin found 2 warnings in "G:/Code/webpack-config-plugins/tsconfig.json".
Warning:
   skipLibCheck option was NOT specified
   By default the fork-ts-checker-webpack-plugin will check all types inside the node_modules directory
   even for unused dependencies and slow down the type checking a lot.
   To skip that checking add the following line to your tsconfig.json compilerOptions configuration:
   "skipLibCheck": true
   To keep the default behaviour with possible performance penalties set skipLibCheck to false to hide this warning.


Warning:
   moduleResolution option was NOT specified
   This will result in typescript warnings like "module not found".
   To fix that add the following line to your tsconfig.json compilerOptions configuration:
   "moduleResolution": "node"
   To keep the default behaviour with possible type checking errors set moduleResolution to "classic" to hide this warning.

What is the motivation / use case for changing the behavior?

As someone who has dived straight into the installation steps (like other new users will likely do) the presence of warnings and errors makes me assume that something has gone wrong, and I am now going on a journey figuring out what else to add.

I have some experience with typescript/webpack so I will be happy to help with some PRs if you think this should be addressed.

I suggest either of the following:

• Add steps to the README.md that specify how to create the required files.
• Update webpack-config-plugins to use defaults in the absence of the config files.

The warnings when using the initialised tsconfig.json suggest that actually there are some values that it expects by default to work correctly?

Perhaps there could be some way to instantiate the files if they are not found?

Environment

- Plugin version: 1.2.1
- Node version: v10.1.0
- Platform: Windows 10

[bencoveney]

For reference, my install steps were actually:

• npm i --save-dev webpack webpack-cli common-config-webpack-plugin
• create src/index.ts with console.log("Hello World!");
• create src/main.scss
• create tsconfig.json
• webpack --plugin common-config-webpack-plugin --mode=production

I have the following in my tsconfig.json:

{
"compilerOptions": {
  "target": "es5",
  "module": "commonjs",
  "strict": true,
  "esModuleInterop": true,
  "moduleResolution": "node",
  "skipLibCheck": true
},
"include": [
  "./src/**/*.ts"
]
}

This leaves me with:

Couldn't find an appropriate babel configuration file in the current directory.
                        Please check if the name of the file is correct and if it's in the correct directory.
                        For further information please check the documentation: https://babeljs.io/docs/en/babelrc.html
Starting type checking service...
Using 1 worker with 2048MB memory limit
Hash: 9272af3dc477f7381306
Version: webpack 4.28.4
Time: 1781ms
Built at: 2019-01-16 21:04:32
  Asset       Size  Chunks             Chunk Names
main.js  971 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.ts 44 bytes {0} [built]

Which is much closer to what I was expecting

[jantimon]

Wow thanks a lot for your review and sharing the getting started experience as a new user.

src/: We assumed that people using a webpack plugin would already know that the wepack default entry is set to src/ (depends on the webpack version you are using).
What would have improved your experience for this point?
Should we improve the readme with a better getting started guide?

mode: Webpack 4 asks you to choose whether you need support for easier development (e.g. faster builds) or for production (e.g. smaller bundle size).
Do you have any idea how we could improve this point?

Warning about tsconfig and babel:
Usually you would pick either babel or typescript and you have to fine tune your babel or tsconfig depending on your requirements.
How can we get better on this?
Maybe link to their documentation?

npx tsc —init: Unfortunately the initialized config from the official typescript transpiler (tsc) is a little bit outdated.

This project does not try to be a boilerplate but rather provide plugins for easier configuration but I would love to improve the documentation. Especially the getting started guide.

We should probably also mention the cli and the web based plugin chooser.
Have you already tried one of them?

npx generate-webpack-config

https://webpack-config-plugins.js.org

[bencoveney]

Thanks for the quick reply 👍

I've taken a closer look now. I think my initial misunderstanding/oversight was that the initial warnings I was seeing were from ts-loader and babel-loader rather than from the webpack loaders that you are wrapping.

Having a dig into the code now I see that those are your warnings and that actually not creating a tsconfig.json and using yours is fine for my purposes of just getting a project up and running super quickly.

With what you say in mind, I'd recommend the following:

• Warning messages:
  • Give the warnings a webpack-config-plugins prefix
  • Point to these docs
  • Make them shorter (less scary for someone new) as really everything is OK AFAICT
  • Something like [webpack-config-plugins] Using default tsconfig - https://.....
• Documentation
  • Add --mode=development to the command in the README. It will squash the error, and the development build will give a quicker build than the production one to get people excited 😉
  • Add something to that list that gives the expected files. You are right that many people will know what to do, but it would remove a stumbling block and make the process 100% seamless.

I think that would make my first build look like this:

[webpack-config-plugins] Using default tsconfig - https://bit.ly/2RTjBVB
[webpack-config-plugins] Using default babelrc - https://bit.ly/2Cpql3N
Starting type checking service...
Using 2 workers with 2048MB memory limit
Hash: 09242af0ac515066c6d4
Version: webpack 4.28.4
Time: 1618ms
Built at: 2019-01-16 22:28:58
  Asset      Size  Chunks             Chunk Names
main.js  3.83 KiB    main  [emitted]  main
Entrypoint main = main.js
[./src/index.ts] 38 bytes {main} [built]

I've fed the URLs through a shortener as they were ~100 chars otherwise. For me that would be perfect - everything looks like it has run OK.

Let me know if you think these are good suggestions - I'd love to contribute 😄

I didn't know about the website or CLI tool - those look awesome. Off topic but I have actually tried to make a "defaults" webpack project for myself in the past with limited success - I think I let it get too bloated and keeping everything up-to-date was a big pain.

[jantimon]

@bencoveney I started to improve the experience in #47

Would love to know what you think

[bencoveney]

👍 This looks great, super clear and easy for new users - thanks for all your help.