Webpackを使用したファイルの置換/エイリアス

Question

私はnpmを使用してインストールした非常に新しいサードパーティのモジュールをプロジェクトで使用しようとしています。このモジュールは、大文字と小文字を区別しないファイルシステムを持つOS上で開発されたことが明らかになったので、ファイルinjectable.jsが必要ですが、実際のファイル名はInjectable.jsです。これにより、バンドル処理が中断されます。

モジュールの開発者は、この問題を認識しています。一方、私はモジュールをそのまま使用する方法を見つけようとしています。私はWebpackを使ってプロジェクトをバンドルしています。

私のプロジェクトの関連部分のツリー構造は大体これです：

├──config 
│  ├──webpack 
│   ├──webpack.js 
│ 
├──src 
│ ├──client 
│  ├──index.js 
│ 
│ 
├──node_modules 
│ ├──the module in question 
│   ├── dist 
│   │   ├── decorators 
│   │   │   ├── providers 
│   │   │      ├── Injectable.js 
│   │   │ 
│   │ ├── index.js 
| 
├──gulpfile.js 

node_modules/the module in question/distフォルダ内のファイルがindex.jsプロバイダフォルダからファイルInjectable.jsを必要とするが、コマンドでそうしているrequire('./decorators/providers/injectable');

index.jsに./decorators/providers/injectableという別名を付けたいと思います。./decorators/providers/Injectableです。ここで

は、私は私のwebpack.jsファイルでやっているものです：

resolve: { 
     alias: { 
      './decorators/providers/injectable': './decorators/providers/Injectable.js', 
     }, 
} 

しかし、これはまだ動作しません。エラーが発生しましたModule not found: Error: Cannot resolve 'file' or 'directory' ./decorators/providers/injectable

Webpackにバンドルする際にノードモジュール内のファイル名を別の名前に置き換える方法を教えてください。

UPDATE：

var path = require('path'); 
var rucksack = require('rucksack-css')({ 
    fallbacks: true, 
    autoprefixer: true 
}); 
var precss = require('precss'); 
var csswring = require('csswring'); 
var webpack = require('webpack'); 

module.exports = { 
    context: path.join(__dirname, '../../'), 
    debug: false, 
    entry: [ 
     './src/client/' 
    ], 
    output: { 
     path: path.join(__dirname, '../../public/assets/js'), 
     filename: 'bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel?stage=1' 
      }, 
      { 
       test: /\.css$/, 
       loader: 'style-loader!css-loader!postcss-loader' 
      }, 
      {test: /\.png$/, loader: 'file-loader'}, 
      {test: /\.gif$/, loader: 'file-loader'}, 
      {test: /\.jpe?g$/, loader: 'file-loader'}, 
      {test: /\.eot$/, loader: 'file-loader'}, 
      {test: /\.woff2?$/, loader: 'file-loader'}, 
      {test: /\.ttf$/, loader: 'file-loader'}, 
      {test: /\.svg$/, loader: 'file-loader'} 
     ] 
    }, 
    postcss: function() { 
     return [rucksack, precss, csswring]; 
    }, 
    plugins: [ 
     new webpack.NormalModuleReplacementPlugin(
      /ng-forward\/dist\/decorators\/providers\/injectable\.js/, 
      require.resolve('ng-forward/dist/decorators/providers/Injectable') 
     ) 
    ], 
    resolve: { 
     extensions: ['', '.js'] 
    } 
}; 

Answer 1

使用webpack.NormalModuleReplacementPlugin：

ここでのWebPACKのconfigファイルだ

plugins: [ 
    new webpack.NormalModuleReplacementPlugin(
    /ng-forward\/dist\/decorators\/providers\/injectable\.js/, 
    require.resolve('ng-forward/dist/decorators/providers/Injectable') 
), 
],