2

这是我原来的 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
4

1 回答 1

2

利用

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

因为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，那时它还需要使用加载器，但是因为您使用相对路径 ( ./node_modules) 设置了根目录，所以它会./src/records/departure/node_modules改为查找。因此给你这个错误。

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

重要提示：这里的加载器是相对于它们所应用的资源进行解析的。这意味着它们不会相对于配置文件进行解析。如果你从 npm 安装了加载器，并且你的 node_modules 文件夹不在所有源文件的父文件夹中，那么 webpack 找不到加载器。您需要将 node_modules 文件夹作为绝对路径添加到 resolveLoader.root 选项。(resolveLoader: { root: path.join(__dirname, "node_modules") })

于 2017-01-24T20:07:38.693 回答