如何与Webpack jsHint两个不同的文件夹？

Question

简而言之，在构建过程中，我需要与包源并行地进行jshint测试规范。

使用Webpack 3，如何使jshint-loader监视两个不同的文件夹与两个不同的.jshintrc文件？.jshintrc的一个源代码包在./src文件夹中，该文件夹是捆绑到端分发的，另一个包与另一个.jshintrc在./test文件夹中，在Webpack配置中没有提到这一点(Karma处理它)。

我尝试了以下两种方法，这两种方法都只处理./src，它们没有对./test做任何事情。Webpack配置的第一版：

entry: {
    'ui-scroll': path.resolve(__dirname, '../src/ui-scroll.js'),
    'ui-scroll-grid': path.resolve(__dirname, '../src/ui-scroll-grid.js')
},    
module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: { presets: ['es2015'] }
      },
      {
        enforce: 'pre',
        test: /\.js$/,
        include: path.resolve(__dirname, '../src'),
        use: [{ loader: 'jshint-loader' }]
      },
      {
        enforce: 'pre',
        test: /\.js$/,
        include: path.resolve(__dirname, '../test'),
        use: [{ loader: 'jshint-loader' }]
      }
    ]
},
// ...

Webpack配置的第二个版本在模块-规则部分不同：

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: { presets: ['es2015'] }
      },
      {
        enforce: 'pre',
        test: /\.js$/,
        include: [
          path.resolve(__dirname, '../src'),
          path.resolve(__dirname, '../test')
        ],
        use: [{ loader: 'jshint-loader' }]
      }
    ]
},
// ...

但就像我说的，这不管用。可以从这个储存库获得完整的配置/源。那么，是否有可能修复我的方法，还是我需要尝试一些完全不同的东西？

Answer 1

经过一些研究，我们能够通过将这个问题分成两部分来解决这个问题:在产品构建期间的jshinting测试(只在磁盘上发布一次)和在开发过程中(监视模式，分布式在内存中)。

1.生产构建。--这很简单，因为jshit应该只执行一次。在将jshint作为依赖项添加到npm-包后-

npm install --save-dev jshint

它可以添加到构建脚本中-

"hint-tests": "jshint --verbose test",
"build": "npm run hint-tests && npm run prod-build && npm run prod-test"

prod-build和prod-test进程都不了解jshint。

2. 解决方案是通过格罗布添加一个新的入口点

entry: {
  'ui-scroll': path.resolve(__dirname, '../src/ui-scroll.js'),
  'ui-scroll-grid': path.resolve(__dirname, '../src/ui-scroll-grid.js')
  'test': glob.sync(path.resolve(__dirname, 'test/*.js')) // development only!
}

应该只在开发环境中这样做，否则您将在分发文件夹中获得额外的包。因此，我们将它放在内存中；由于额外的捆绑，它对dev进程有一定的影响，但是由于这种情况仅发生在内存中，所以差别是很小的。然后使用jshint装载机，让我们向webpack配置的模块部分再添加一条规则：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      options: { presets: ['es2015'] }
    },
    { // this is both for prod and dev environments
      enforce: 'pre',
      test: /\.js$/,
      include: path.resolve(__dirname, 'src'),
      use: [{ loader: 'jshint-loader' }]
    },
    { // this is only for dev environment
      enforce: 'pre',
      test: /\.js$/,
      include: path.resolve(__dirname, 'test'),
      use: [{ loader: 'jshint-loader' }]
    }
  ]
}

控制台输出中可能有太多日志，特别是在开发服务器工作期间，因此通过stats属性限制输出可能会有所帮助：

  stats: {
    modules: false,
    errors: true,
    warnings: true
  }