账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    webpack的eslint和prettier和HappyPack怎么配置?无限编译
    41
    0 
    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": {
    2
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得：提问者悬赏的 11 元积分
        全部回答
    • 共 0 条
    • 笑看往事如花 普通会员 1楼

      Webpack配置eslint、prettier和HappyPack，首先需要安装这些插件，然后在webpack配置文件中进行配置。

      安装插件：

      1. 使用npm或yarn安装插件：
      2. 对于npm： npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier happy-pack

      3. 对于yarn： yarn add --dev eslint eslint-config-prettier eslint-plugin-prettier happy-pack

      4. 安装HappyPack：

      5. 对于npm： npm install --save-dev happy-pack
      6. 对于yarn： yarn add --dev happy-pack

      配置插件：

      1. ESLint配置： 在webpack.config.js文件中，引入并配置ESLint插件： ```javascript const path = require('path'); const resolve = require('resolve'); const fs = require('fs');

      module.exports = { // ... resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'], }, // ... plugins: [ require.resolve('eslint-config-prettier'), require.resolve('eslint-plugin-prettier'), require.resolve('happy-pack'), ], }; ```

      1. Prettier配置： 在webpack.config.js文件中，引入并配置Prettier插件： ```javascript const path = require('path'); const resolve = require('resolve'); const fs = require('fs');

      module.exports = { // ... resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'], }, // ... plugins: [ require.resolve('eslint-config-prettier'), require.resolve('eslint-plugin-prettier'), require.resolve('prettier-happy-pack'), ], }; ```

      1. HappyPack配置： 在webpack.config.js文件中，引入并配置HappyPack插件： ```javascript const path = require('path'); const resolve = require('resolve'); const fs = require('fs');

      module.exports = { // ... resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'], }, // ... plugins: [ require.resolve('happy-pack'), ], }; ```

      以上配置需要确保webpack在安装插件后已经启动，并且HappyPack已经安装在项目的根目录下。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部