jshint-loader不使用webpack版本4

Question

使用版本4试用和学习webpack及其基础知识.面对装载机和配置的一些问题

webpack配置如下:

module.exports = {
  entry: ['./app.js', './util.js'],
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.es6$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'jshint-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.es6']
  }
}

在webpack-dev-server,错误出现,如下:

ERROR in ./app.js
Module build failed: TypeError: Cannot read property 'jshint' of undefined
at Object.jsHint (/home/sagar/Documents/mine/gitrepo/webpack_illustration/node_modules/jshint-loader/index.js:63:17)
at Object.<anonymous> (/home/sagar/Documents/mine/gitrepo/webpack_illustration/node_modules/jshint-loader/index.js:149:11)
at /home/sagar/Documents/mine/gitrepo/webpack_illustration/node_modules/jshint-loader/index.js:55:5
at tryToString (fs.js:513:3)
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:501:12)
@ multi (webpack)-dev-server/client?http://localhost:8080 ./app.js ./util.js

Answer 1

Webpack 4在加载器上下文中删除了this.options,jshint-loader只是通过删除代码修复了这个问题.但是在npm注册表中还没有构建.你可以从GitHub中提取最新的jshint-loader,然后使用'npm link'

或者您可以转到node_modules,找到jshint-loader,然后修改代码

function jsHint(input, options) {
    // copy options to own object
    if(this.options.jshint) {
        for(var name in this.options.jshint) {
            options[name] = this.options.jshint[name];
        }
    }

至

function jsHint(input, options) {
    // copy options to own object
    if(this.options && this.options.jshint) {
        for(var name in this.options.jshint) {
            options[name] = this.options.jshint[name];
        }
    }

请参考https://medium.com/webpack/webpack-4-migration-guide-for-plugins-loaders-20a79b927202

github修复:https://github.com/webpack-contrib/jshint-loader/blob/master/lib/index.js第11行