哈哈，给 webpack-dev-server 提了个 bug

背景是这样的，最近在全面整理 webpack 的配置项，为了加深理解和印象，会一个一个地选项去验证。今天看到 resolve 模块，然后发现了一个问题，所以有了 Modify webpack's resolve.mainFiles, resulting in an error when using webpack-dev-server #2801。

最终开发人员表示这确实是 bug，将在未来发布的 v4 版本修复。

关于提 ISSUE，由于需要外国友人看得懂，加上我蹩脚的英文，只能全程在谷歌翻译，尴尬哈哈 🤣

---

• Operating System: macOS 10.15.7
• Node Version: 12.12.0
• NPM Version: 6.13.3
• webpack Version: 4.41.2
• webpack-dev-server Version: 3.9.0
• Browser: It has nothing to do with the browser (Chrome)

• This is a bug
• This is a modification request

Code

// webpack.config.js
module.exports = {
  // ...
  resolve: {
    mainFiles: ['fortest'] // Any name, as long as it is not 'index'
  }
}

// index.js（entry）
// The directory of components/button contains the fortest.js file
import Button from './components/button'

Expected Behavior

The resolve.mainFiles to be used while resolving directories.

When I import the button component as above, there should be no errors.

Actual Behavior

But the actual behavior is not the expected result, and the build fails with the following prompt:

ERROR in (webpack)-dev-server/client?http://localhost:8080
Module not found: Error: Can't resolve 'strip-ansi' in '/Users/frankie/Desktop/Web/Demo/Temp/temp_webpack/node_modules/webpack-dev-server/client'
 @ (webpack)-dev-server/client?http://localhost:8080 6:16-37
 @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.js

Guess

According to the error message, I found...

// node_modules/webpack-dev-server/client/index.js
// ...
var stripAnsi = require('strip-ansi');
// ...

// node_modules/strip-ansi/index.js
// ...
var ansiRegex = require('ansi-regex')();
// ...

I found the package.json of the two dependency packages strip-ansi and ansi-regex does not contain the main attribute, so it should look for index.js according to the default configuration of webpack. But now because I modified the resolve.mainFiles configuration to fortest, it should be fortest.js when parsing, but there is no fortest.js file for the two dependent packages. So an error was reported.

To verify my guess, I tried to modify it to:

// node_modules/webpack-dev-server/client/index.js
var stripAnsi = require('strip-ansi/index');

// node_modules/strip-ansi/index.js
var ansiRegex = require('ansi-regex/index')();

After the modification, this can be parsed normally without an error.
The button component can also be imported as expected

For Bugs; How can we reproduce the behavior?

A very simple configuration

// webpack.config.js
module.exports = {
  entry: './src/index.js'
  devServer: {
    contentBase: './dist',
    hot: true,
    open: true
  },
  resolve: {
    mainFiles: ['fortest'],
  },
  // Other irrelevant configuration...
}

// package.json
{
  "name": "temp_webpack",
  "version": "1.0.0",
  "description": "temp demo",
  "license": "MIT",
  "scripts": {
    "dev": "webpack-dev-server --config webpack.config.js --colors"
  },
  "devDependencies": {
    "clean-webpack-plugin": "3.0.0",
    "css-loader": "3.2.0",
    "file-loader": "5.0.2",
    "html-webpack-plugin": "3.2.0",
    "style-loader": "1.0.0",
    "webpack": "4.41.2",
    "webpack-cli": "3.3.10",
    "webpack-dev-server": "3.9.0"
  }
}

webpack allows us to modify the resolve.mainFiles configuration to specify the file name to be used when resolving the directory. But when I modify it, webpack-dev-server can't work normally.

Is this caused by my configuration error? Or is it a bug?

Thanks,