Question

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

此设置可在3台（Windows）PC上运行，但不能在一台特定计算机上运行，尽管它们都使用相同版本的node，webpack，npm和其他npm软件包。

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

{ "states": [ 1,2 ] }个以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文件（角组件），包含@Component

*.ts

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

webpack.config加载程序/规则部分

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

package.json

    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 } 
      }
    ]
  },

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

还有其他可能影响Webpack的东西，因此加载器未被使用/识别吗？

我再说一遍，此配置在其他PC上可以正常运行。

任何帮助都会给人留下深刻的印象。

Answer 1

在我的情况下，问题在于我们已对存储库进行了重组，使其具有单个根级别的package.json文件，而不是多个子目录中的每个子目录中的一个。这意味着除非每个人都删除旧的node_modules文件夹，否则Webpack会找到一个过时的文件夹并在其中寻找ts-loader，而不是在正确的位置查找。

可以通过使用resolveLoader配置选项告诉webpack确切的位置在哪里寻找加载程序来避免这种情况。例如：

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

请注意，resolve.modules的{{3}}（也适用于resolveLoader.modules）指出：

绝对路径和相对路径都可以使用，但是请注意，它们的行为会有所不同。

相对路径的扫描方式类似于Node扫描以下内容的方式通过查看当前目录及其目录，查看node_modules 祖先（即./node_modules、../node_modules等）。

具有绝对路径，它将仅在给定目录中搜索。

默认行为似乎与相对路径方法相对应-Webpack配置文件与包含期望的node_modules文件夹的文件夹之间的目录树中的任何node_modules文件夹，在我们的案例中，这会导致您尝试更新TypeScript时所描述的确切问题。

Webpack 4 ts-loader和less-loader在某些PC上不起作用

1 个答案: