Webpack не всегда может решить Загрузчик TS

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 (текст редактор с машинопись плагин), в настоящее время только следующие альтернативные работы:

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'))

Как вы можете видеть, в первую config '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, и в то время ему также потребуется использовать загрузчик, но поскольку вы установили корень с использованием относительного пути (./node_modules), он будет выглядеть в ./src/records/departure/node_modules. Следовательно, дает вам эту ошибку.

выше не совсем правильно, но все же рода применяются, но вот ссылка на документы: module.loaders

ВАЖНО: Грузчики здесь разрешены относительно ресурса которых они применяются к.Это означает, что они не разрешены относительно в файле конфигурации. Если у вас установлены загрузчики с npm и , то ваша папка node_modules не находится в родительской папке всех файлов источника , webpack не может найти загрузчика. Вам нужно добавить папку node_modulesкак абсолютный путь к параметру resolveLoader.root . (ResolveLoader: {корень: path.join (__ имя_директории, "node_modules") })