2

これは私のオリジナルの webpack 構成ファイルで、両方が使用される 2 つの異なる構成で構成されています。

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'はまだ存在しますが (まだ機能しているため)、2 番目の構成ではrequire.resolve('ts-loader'). 今、私はこの要件の理由を見つけようとしています。require.resolve他のプロジェクトでも使用を余儀なくされたことは覚えていますが、その理由を認識していませんでした。

違いを生む目立たないコード行 (2 番目の構成):

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

コメントすると、 を使用して再び機能し'ts'ます。

私のファイル システムでは、パス lib/date-time/date-time.ts は ./src (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