webpack的eslint和prettier和HappyPack怎么配置?无限编译

Question

rules: [
      {
        test: /\.(js|jsx|es6)$/,
        enforce: "pre",
        use: [
          {
            loader: "eslint-loader",
            options: { fix: true }  //注释掉这个就没事,但是要用prettier,打开就无限编译
          }
        ],
        include: includePath,
        exclude: /node_modules/
      },
      {
        test: /\.(js|jsx|es6)$/,
        exclude: /node_modules/,
        use: "happypack/loader?id=happy-babel-js"
      },
      
      ...
    //插件
    new HappyPack({
      id: "happy-babel-js",
      loaders: ["babel-loader"],
      threadPool: happyThreadPool
    }),

"parser": "babel-eslint",
  "extends": ["airbnb", "plugin:prettier/recommended","prettier/react"],
  "plugins": ["prettier","react","import","jsx-a11y"],
  "rules": {

Answer 1

你需要在plugins里再定义一个关于eslint的loader：

    new HappyPack({
      id: 'eslint',
      threads: 4,
      loaders: [{
        loader: 'eslint-loader',
        options: {
          fix: true
        }
    })

注意，把eslint的options放在上面。

然后，在rules里用id的方式引用happypack里的eslint loader：

{
        test: /\.(js|jsx|es6)$/,
        enforce: "pre",
        use: 'happypack/loader?id=eslint',
        include: includePath,
        exclude: /node_modules/
    }