node.js - Webpack 4 ts-loader 和 less-loader 在某些电脑上无法工作

Question

我从 webpack 1.x 迁移到 4.30。 Node 版本:10.15.3 typescript 版本:3.4.5npm 版本:6.9.0

此设置适用于 3 台(Windows)电脑，但不适用于一台特定机器，尽管它们都使用相同版本的 Node 、webpack、npm 和其他 npm 包。

在不工作的机器上，就好像 Webpack 没有使用 webpack.config.ts 中定义的 less-loader 和 ts-loader.. 并给出以下错误:

*.less 以 id 选择器开头的文件

Unexpected character '#' (1:1)
You may need an appropriate loader to handle this file type

*.less 以@import 开头的文件

Module parse failed: Unexpected character '@' You may need an appropriate loader to handle this file type

*.ts 包含 @Component 的文件(角度组件)

Unexpected character '@' (11:0)
You may need an appropriate loader to handle this file type

我已经尝试重新安装node.js，清除npm缓存，清除node_modules文件夹和新的npm安装，重新启动电脑几次。在另一台电脑上，我们遇到了同样的问题，但重新启动后“神奇”地解决了..

webpack.config 加载器/规则部分

    rules: [
      {
        test: /\.ts$/,
        include: [resolve(__dirname, "Assets")],
        use: [
          "ng-annotate-loader",
          "ts-loader",
          "angular-router-loader"
        ]
      },
      {
        test: /\.less$/,
        include: [resolve(__dirname, "Assets/StyleSheets"), resolve(__dirname, "Assets/NgComponentsNew"), resolve(__dirname, "Assets/WpBundles")],
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              plugins: () => [require('autoprefixer')({
                'browsers': ['> 1%', 'last 2 versions']
              })],
            }
          },
          "less-loader"
        ]
      },
      {
        test: /\.html$/,
        include: [resolve(__dirname, "Assets/NgComponents"), resolve(__dirname, "Assets/NgComponentsNew")],
        use: ["html-loader"]
      },
      {
        test: /\.ico$/,
        include: [resolve(__dirname, "Assets/Images")],
        use: {
          loader: "file-loader",
          options: {
            name: "Images/[name].[ext]"
          }
        }
      },
      {
        test: /\.(png|jpg|gif)$/,
        include: [resolve(__dirname, "Assets/Images"), resolve(__dirname, "Assets/Kendo")],
        use: {
          loader: "file-loader",
          options: {
            name: "Images/[name].[ext]",
            publicPath: "/mvc/static/"
          }
        }
      },
      {
        test: /\.(otf|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        include: [resolve(__dirname, "Assets"), resolve(__dirname, "./node_modules/@fortawesome/fontawesome-free/webfonts"), resolve(__dirname, "./node_modules/bootstrap/fonts")],
        use: {
          loader: "file-loader",
          options: {
            name: "Fonts/[name].[ext]",
            publicPath: "/mvc/static/"
          }
        }
      },
      {
        test: /jquery.+\.js$/,
        use: [{
          loader: 'expose-loader',
          options: 'jQuery'
        }, {
          loader: 'expose-loader',
          options: '$'
        }]
      },
      //avoid "import" warning
      { 
        test: /[\/\\]@angular[\/\\].+\.js$/, 
        parser: { system: true } 
      }
    ]
  },

package.json

{
  "name": "ourproject",
  "version": "1.1.0",
  "description": "Client Npm Packages",
  "main": "",
  "dependencies": {
    "@angular/animations": "7.2.13",
    "@angular/common": "7.2.13",
    "@angular/compiler": "7.2.13",
    "@angular/core": "7.2.13",
    "@angular/forms": "7.2.13",
    "@angular/http": "7.2.13",
    "@angular/platform-browser": "7.2.13",
    "@angular/platform-browser-dynamic": "7.2.13",
    "@angular/router": "7.2.13",
    "@angular/upgrade": "7.2.13",
    "@fortawesome/fontawesome-free": "5.6.3",
    "@progress/kendo-angular-buttons": "4.4.0",
    "@progress/kendo-angular-l10n": "1.4.0",
    "angular": "1.7.8",
    "angular-animate": "1.7.8",
    "angular-filter": "0.5.17",
    "angular-resource": "1.7.8",
    "angular-sanitize": "1.7.8",
    "angular-translate": "2.18.1",
    "automapper-ts": "1.9.0",
    "bootstrap": "3.3.7",
    "bootstrap-less": "3.3.8",
    "core-js": "3.0.0",
    "eruda": "1.5.0",
    "es5-shim": "4.5.10",
    "golden-layout": "1.5.8",
    "jquery": "3.3.1",
    "jquery-ui-bundle": "1.12.1",
    "jquery-validation-unobtrusive": "3.2.10",
    "json3": "3.3.2",
    "linq": "3.1.0",
    "lodash": "4.17.11",
    "moment": "2.22.2",
    "reflect-metadata": "0.1.13",
    "rxjs": "6.5.1",
    "rxjs-compat": "6.5.1",
    "zone.js": "0.8.26",
    "core.js": "0.4.2"
  },
  "devDependencies": {
    "@angular/language-service": "7.2.13",
    "@types/angular": "1.6.48",
    "@types/angular-resource": "1.5.14",
    "@types/angular-sanitize": "1.3.7",
    "@types/bootstrap": "3.3.39",
    "@types/core-js": "2.5.0",
    "@types/jasmine": "3.3.12",
    "@types/jquery.validation": "1.16.4",
    "@types/kendo-ui": "2018.1.2",
    "@types/lodash": "4.14.110",
    "@types/webpack": "4.4.27",
    "@types/webpack-dev-server": "3.1.5",
    "@types/webpack-env": "1.13.9",
    "@types/node": "11.13.7",
    "angular-router-loader": "0.8.5",
    "autoprefixer": "9.5.1",
    "awesome-typescript-loader": "5.2.1",
    "css-loader": "2.1.1",
    "expose-loader": "0.7.5",
    "file-loader": "3.0.1",
    "html-loader": "0.5.5",
    "imports-loader": "0.8.0",
    "jasmine": "3.4.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "4.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "2.0.0",
    "karma-coverage": "1.1.2",
    "istanbul-instrumenter-loader": "3.0.1",
    "karma-remap-coverage": "0.1.5",
    "karma-coverage-istanbul-reporter": "2.0.5",
    "karma-jasmine-html-reporter": "1.4.1",
    "karma-jasmine": "2.0.1",
    "karma-phantomjs-launcher": "1.0.4",
    "karma-sourcemap-loader": "0.3.7",
    "karma-webpack": "3.0.0",
    "less": "3.9.0",
    "less-loader": "4.1.0",
    "mini-css-extract-plugin": "0.5.0",
    "ng-annotate-loader": "0.6.1",
    "optimize-css-assets-webpack-plugin": "5.0.1",
    "postcss-loader": "3.0.0",
    "rimraf": "2.6.3",
    "script-loader": "0.7.2",
    "style-loader": "0.23.1",
    "terser-webpack-plugin": "1.2.3",
    "ts-loader": "5.3.3",
    "ts-node": "8.0.3",
    "typescript": "3.4.5",
    "url-loader": "1.1.2",
    "util": "0.11.1",
    "webpack": "4.30.0",
    "webpack-bundle-analyzer": "3.3.2",
    "webpack-cli": "3.3.0",
    "webpack-dev-server": "3.3.1",
    "webpack-merge": "4.2.1",
    "webpack-node-externals": "1.7.2",
    "webpack-stats-plugin": "0.2.1",
    "protractor": "5.4.2",
    "uglifyjs-webpack-plugin": "2.1.2"
  }

我希望在每台具有相同 node.js 和相同 npm webpack 的机器上都能正确处理文件

是否有其他因素可能影响 Webpack，导致加载器无法使用/识别？

我再说一遍，这个配置在其他电脑上运行没有任何问题..

任何帮助将不胜感激..

Answer 1

就我而言，问题是我们重组了我们的存储库以拥有单个根级别 package.json文件，而不是多个子目录中每个子目录中的一个。这意味着除非每个人都删除旧的 node_modules文件夹，webpack 会找到一个过时的文件夹并在那里查找 ts-loader而不是寻找正确的地方。

可以通过使用 resolveLoader 告诉 webpack 在哪里寻找加载器来避免这种情况。配置选项。例如:

  resolveLoader: {
    modules: [path.resolve(__dirname, '../../../node_modules')],
    mainFields: ['ts-loader']
  },

请注意 documentation对于 resolve.modules ，这也适用于 resolveLoader.modules ，状态:

Absolute and relative paths can both be used, but be aware that they will behave a bit differently.

A relative path will be scanned similarly to how Node scans for node_modules, by looking through the current directory as well as its ancestors (i.e. ./node_modules, ../node_modules, and on).

With an absolute path, it will only search in the given directory.

默认行为似乎对应于相对路径方法--any node_modules目录树中 webpack 配置文件和包含 node_modules 的文件夹之间的文件夹将使用您期望使用的文件夹，在我们的例子中，当我们尝试更新 TypeScript 时，这会导致您所描述的确切问题。