webpack - 如何在浏览器屏幕上启用错误显示？

Question

保存文件后（在热重新加载时），我花了一些时间寻找在浏览器屏幕上输出 ESLint 错误的解决方案。我的环境：

Webpack
ES6
Typescript

有什么解决办法？

Answer 1

一种方法是在项目中使用以下插件组合webpack.js：

...
plugins: [
  new ESLintPlugin({
    files: 'src/**/*.(js|jsx|ts|tsx)',
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    configFile: '.eslintrc.json',
    lintDirtyModulesOnly: true,
    emitError: true,
    emitWarning: true,
    failOnError: false,
    failOnWarning: false,
  }),
  new ErrorOverlayPlugin(),
  new webpack.HotModuleReplacementPlugin({}),
],
...

假设：

• 你使用 webpack.js 作为捆绑工具
• 你已经.eslintrc.json为你的项目配置了
• 你已经安装并导入ESLintPlugin到ErrorOverlayPlugin你的 webpack.js 文件中