[BUG]: 🐞 webpack-cli add wont lookup for webpack's native plugin in plugins options

[anikethsaha]

Describe the bug
When using the add command and then selecting plugins to add and giving webpack's native plugin like webpack.DefinePlugin , it will throw error with saying no plugin exists.

What is the current behavior?
webpack-cli add wont add webpack's native plugin
The error will throw

? What property do you want to add to? plugins
? What do you want to add to plugins? webpack.DefinePlugin
webpack.DefinePlugin doesn't exist on NPM or is built in webpack, please check for any misspellings.

To Reproduce

1. npx webpack-cli add
2. in plugins options
3. Give any webpack's native plugin like webpack.DefinePlugin
4. It will throw

webpack.DefinePlugin doesn't exist on NPM or is built in webpack, please check for any misspellings.

Fix
We can have a curated list of all the native plugins and then we can look up to that list and the npmExist method before adding the plugin

Expected behavior
Should add even webpack's native plugin

Please paste the results of webpack-cli info here, and mention other relevant information

  System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-6200U CPU @ 2.30GHz
  Binaries:
    Yarn: 1.15.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    webpack-cli: ^3.3.2 => 3.3.2

[evenstensberg]

feel free to open a pr

[anikethsaha]

@evenstensberg sure but I couldn't find much of native plugins other than the mention. Do you have any list or can you mention where I can find them?
I checked at the docs and at webpack repo too. Please mention if I missed any!

[evenstensberg]

We're searching through the available plugins that are hooked up on the webpack object. You could dig and debug yourself to figure out?

[anikethsaha]

okay I will try it out at best......

[anikethsaha]

there are few in here https://github.com/webpack/webpack/tree/master/lib
atleast we can start with them ...what say ? @evenstensberg

[evenstensberg]

That’s where we are finding them from, the logic is already present

[anikethsaha]

Currently, we looking from these files?

updated:
If we are looking up to these files then simply plugin name without the webpack. the prefix should work I guess, but it isn't

? What property do you want to add to? plugins
? What do you want to add to plugins? DefinePlugin
DefinePlugin doesn't exist on NPM or is built in webpack, please check for any misspellings.

I think we should add the built-in plugins too instead of just printing that it is built-in. What do you think? @evenstensberg

We can look up to the types for the plugin name...it would be simple...if we are implementing this https://github.com/DefinitelyTyped/DefinitelyTyped/blob/21e68259f6fd43aba37e8112e3edb792975f8266/types/webpack/index.d.ts#L1385

[anikethsaha]

here is the list till now I made from the type file

export const nativePluginsList : Array<string> = [
	"webpack.DefinePlugin",
	"webpack.AmdMainTemplatePlugin",
	"webpack.ContextReplacementPlugin",
	"webpack.DllPlugin",
	"webpack.DllReferencePlugin",
	"webpack.EvalSourceMapDevToolPlugin",
	"webpack.ExtendedAPIPlugin",
	"webpack.HashedModuleIdsPlugin",
	"webpack.HotModuleReplacementPlugin",
	"webpack.IgnorePlugin",
	"webpack.LoaderOptionsPlugin",
	"webpack.NamedChunksPlugin",
	"webpack.NormalModuleReplacementPlugin",
	"webpack.PrefetchPlugin",
	"webpack.ProgressPlugin",
	"webpack.EnvironmentPlugin",
	"webpack.ProvidePlugin",
	"webpack.SplitChunksPlugin",
	"webpack.SourceMapDevToolPlugin",
	"webpack.WatchIgnorePlugin",
	"webpack.SingleEntryPlugin",
	"webpack.AggressiveSplittingPlugin",
	"webpack.LimitChunkCountPlugin",
	"webpack.MinChunkSizePlugin",
	"webpack.OccurrenceOrderPlugin",
	"webpack.UglifyJsPlugin"
]

The method will get the plugin if the input is webpack.pluginname or if simply pluginname

[evenstensberg]

You don't need to do this, we have a functionality for this (or at least had) to check if the plugin is on the webpack object, check pluginExist in the add generator. What you will need to do, is to check the filter in the function with an additional webpack. prefix

[anikethsaha]

👍 ohh...missed that ...
then ...it should work with input DefinePlugin ri8 ?

[evenstensberg]

Yes

[anikethsaha]

@evenstensberg we can change the plugin input using this

let tempPluginName = answerToAction.actionAnswer
let isPrefixPresent = /webpack./.test(tempPluginName);
tempPluginName = isPrefixPresent ? tempPluginName.replace("webpack.","").trim() : tempPluginName                

and changin this line

webpack-cli/packages/generators/add-generator.ts

Line 303 in 6ee3c0b

.find((p: string): boolean => p.toLowerCase().indexOf(answerToAction.actionAnswer) >= 0);

with the below

 .filter((x : string ) : string => x == tempPluginName  )

And then using tempPluginName for further execution of the method will work fine

Updated
I think find is fine. filter is not required