webpack运行出现的问题

Question

const getStylLoaders = (type, hasModule = false, importLoadersNumber = 1) => {
  return [
    'style-loader',
    hasModule
      ? {
          loader: 'css-loader',
          options: {
            importLoaders: importLoadersNumber,
            modules: {
              localIdentName: '[local]_[hash:base64:5]',
            },
          },
        }
      : 'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          // 依赖的插件放在这个数组里面
          plugins: ['postcss-preset-env'],
        },
      },
    },
    type === 'less' && 'less-loader',
  ].filter(Boolean);
};

      {
        test: /\.css$/i,
        exclude: /(node_modules)/,
        use: getStylLoaders('css'),
      },
      {
        test: /\.module\.css$/i,
        exclude: /(node_modules)/,
        use: getStylLoaders('css', true, 1),
      },
      {
        test: /\.less$/i,
        exclude: /(node_modules)/,
        use: getStylLoaders('less', false),
      },
      {
        test: /\.module\.less$/i,
        exclude: /(node_modules)/,
        use: getStylLoaders('less', true, 2),
      },

   new ESLintPlugin({
      extensions: ['js', 'jsx', 'ts', 'tsx', 'json'],
      failOnError: true,
    }),

这些是我webpack的配置出现2个问题，运行报错，

一个是我引用index.module.less 报错，一个是关于eslint的报错，不知道怎么解决

Answer 1

引自免费微信小程序：皆我百晓生

针对您提供的webpack配置及遇到的两个问题，我将分别进行分析并提供相应的解决方案。

问题一：LESS编译错误

错误信息显示在编译.module.less文件时，出现了Unrecognised input错误，且指向了style-loader/dist/runtime/injectstylesIntoStyleTag.js。这可能是由于在LESS文件中误用了某些CSS模块相关的导入语法，导致与LESS编译器不兼容。

解决思路：

1. 检查LESS文件：打开报错的./src/Pages/Login/index.module.less，仔细查看第2行第22列附近是否有误用的导入语句或其他可能导致编译失败的代码。确保LESS语法正确无误。

2. 确认CSS Modules导入规则：在使用CSS Modules时，应避免直接在LESS文件中使用类似import API from "!../../../node_modules/style-loader/dist/runtime/injectstylesIntoStyleTag.js"这样的非CSS/Less相关导入。确保所有导入仅限于LESS变量、混合等。

3. 修复或删除可疑代码：根据上述检查结果，修正或删除可能导致编译失败的代码。

问题二：ESLintPlugin配置错误

错误信息指出Unknown options: extensions，提示extensions选项已被移除，并提供了错误来源和位置。这意味着当前使用的ESLintPlugin版本可能不再支持extensions配置项。

解决思路：

1. 更新ESLintPlugin配置：移除extensions选项。在新版本的ESLintPlugin中，通常不需要显式指定文件扩展名，它会自动处理匹配到的文件类型。因此，修改后的ESLintPlugin配置应如下所示：

new ESLintPlugin({
  failOnError: true,
}),

1. 确认ESLintPlugin版本：确保您使用的ESLintPlugin版本与项目中的ESLint版本兼容，并且是最新稳定版。如有必要，更新至最新版本：

npm update eslint-plugin --save-dev
# 或者
yarn upgrade eslint-plugin --dev

综上所述，解决这两个问题需要分别检查并修复LESS文件中的潜在问题，以及更新ESLintPlugin的配置以适应当前版本的要求。完成上述步骤后，重新运行webpack构建，应能成功编译并通过ESLint检查。