Question

这是我原来的webpack配置文件，包含两种不同的配置：

const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = [{
  entry: __dirname + '/src/browser/main',
  output: {
    path: __dirname + '/dist/browser',
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.ts'] // '' is needed to find modules like "jquery"
  },
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'ts'
      }
    ]
  }
}, {
  entry: ['babel-polyfill', __dirname + '/src/app/browser/app'],
  output: {
    path: __dirname + '/dist/app/browser',
    filename: 'bundle.js'
  },
  resolve: {
    root: ['./node_modules', './src'],
    extensions: ['', '.js', '.ts'] // '' is needed to find modules like "jquery"
  },
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'ts'
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style', 'css!sass')
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('bundle.css')
  ]
}]

即使我的所有导入都被例如Atom（带有TypeScript插件的文本编辑器）所接受，但目前只有以下替代方案有效：

const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = [{
  entry: __dirname + '/src/browser/main',
  output: {
    path: __dirname + '/dist/browser',
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.ts'] // '' is needed to find modules like "jquery"
  },
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'ts'
      }
    ]
  }
}, {
  entry: ['babel-polyfill', __dirname + '/src/app/browser/app'],
  output: {
    path: __dirname + '/dist/app/browser',
    filename: 'bundle.js'
  },
  resolve: {
    root: ['./node_modules', './src'],
    extensions: ['', '.js', '.ts'] // '' is needed to find modules like "jquery"
  },
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: require.resolve('ts-loader')
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style', 'css!sass')
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('bundle.css')
  ]
}]

（请注意require.resolve('ts-loader')）

正如您所看到的，在第一个配置'ts'仍然存在（因为它仍然有效），而在第二个配置中我需要用require.resolve('ts-loader')替换它。现在我试着找出这个要求的原因。我记得我也被迫在其他项目中使用require.resolve，但我从来没有意识到原因。

产生差异的不显眼的代码行（第二个配置）：

import * as dateTime from 'lib/date-time/date-time'

如果我对其进行评论，则可以使用'ts'再次使用。

在我的文件系统上，路径lib / date-time / date-time.ts位于./src正下方（在resolve / root数组中提到）。并且它不是第一个导入，具体取决于resolve / root数组。

Webpack输出，错误消息：

> webpack

ts-loader: Using typescript@2.1.4 and /.../src/app/browser/tsconfig.json
ts-loader: Using typescript@2.1.4 and /.../src/browser/tsconfig.json
Hash: 5058e7029f1c0243a269161aa4ddda242a3d33a0
Version: webpack 1.14.0
Child
    Hash: 5058e7029f1c0243a269
    Version: webpack 1.14.0
    Time: 3165ms
        Asset    Size  Chunks             Chunk Names
    bundle.js  283 kB       0  [emitted]  main
        + 4 hidden modules
Child
    Hash: 161aa4ddda242a3d33a0
    Version: webpack 1.14.0
    Time: 3670ms
         Asset    Size  Chunks             Chunk Names
     bundle.js  617 kB       0  [emitted]  main
    bundle.css   25 kB       0  [emitted]  main
       [0] multi main 40 bytes {0} [built]
        + 329 hidden modules

    ERROR in Cannot find module './node_modules/ts-loader/index.js'
     @ ./src/records/departure/departure.ts 2:15-49
    Child extract-text-webpack-plugin:
            + 2 hidden modules
    Child extract-text-webpack-plugin:
            + 2 hidden modules
    Child extract-text-webpack-plugin:
            + 2 hidden modules
    Child extract-text-webpack-plugin:
            + 2 hidden modules

Answer 1

使用

root: path.resolve('./src'),

因为documentation on resolve.root声明：

包含模块的目录（绝对路径）。也可以是一系列目录。此设置应用于将单个目录添加到搜索路径。

一定是绝对的道路！不要传递类似./app/modules的内容。

此外，由于resolve.modulesDirectories已将node_modules作为默认值，因此我们可以从resolve.root中省略它。换句话说，我们不需要root: [path.resolve('./node_modules'), path.resolve('./src'),]

我不是Webpack开发人员，但我的预感是，每次导入时，Webpack都会将当前目录更改为该文件，以便它可以解析相对导入。在从date-time导入./src/records/departure/departure.ts模块期间，它现在将使用目录./src/records/departure，此时它还需要使用加载程序，但因为您已设置root使用相对路径（./node_modules），它将在./src/records/departure/node_modules中查找。因此给你这个错误。

以上内容并不完全正确，但仍然适用，但这里是文档的链接：module.loaders

重要提示：此处的加载器是相对于资源解析的它们适用于哪些。这意味着他们没有相对解决到配置文件。如果您从npm安装了加载器您的node_modules文件夹不在所有源的父文件夹中文件，webpack找不到加载器。你需要添加 node_modules文件夹作为resolveLoader.root的绝对路径选项。（resolveLoader：{root：path.join（__ dirname，“node_modules”） }）

Webpack无法始终解析TS加载程序

1 个答案: