Webpack 4ts-装载机和小型装载机不工作在某些个人电脑上

Question

我从webpack 1.x迁移到4.30。节点版本: 10.15.3打字稿版本: 3.4.5 npm版本: 6.9.0

这个设置工作在3 (windows) pc，但不是在一台特定的机器上，虽然他们都使用相同版本的节点，webpack，npm，其他npm软件包。

在不工作的机器上，Webpack似乎没有使用webpack.config.ts.中定义的较少的装载机和t-加载器。并给出了以下错误：

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

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

以@import开头的*.less文件

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

包含@组件的*.ts文件(角分量)

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

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

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，使装载机不被使用/识别？

重复一遍，这个配置在其他pc上没有任何问题。

任何帮助都会得到很大的帮助。

Answer 1

在我的例子中，问题是我们重组了我们的repo，使其有一个根级的package.json文件，而不是几个子目录中的一个。这意味着，除非每个人都删除了旧的node_modules文件夹，webpack会找到一个陈旧的文件夹，并在那里寻找ts-loader，而不是寻找正确的位置。

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

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

请注意，文档 for resolve.modules (也适用于resolveLoader.modules )声明：

绝对路径和相对路径都可以使用，但要注意它们的行为会有所不同。 相对路径将被扫描，类似于节点如何扫描node_modules，方法是查看当前目录及其祖先(即./ Node _node、./node_node等等)。 使用绝对路径，它将只在给定目录中搜索。

默认行为似乎与相对路径方法相对应--目录树中webpack配置文件与包含您希望使用的node_modules文件夹之间的任何node_modules文件夹都将被使用，在本例中，这将导致您在试图更新TypeScript时所描述的确切问题。