使用Webpack替換/混淆文件

Question

我想在我的項目中使用一個非常新的第三方模塊，我使用npm進行了安裝。該模塊顯然是在一個不區分大小寫的文件系統的操作系統上開發的，所以它需要一個文件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 

的index.js文件中的node_modules/the module in question/dist文件夾，需要從供應商文件夾中的文件Injectable.js，但用命令這樣做require('./decorators/providers/injectable');

我想別名./decorators/providers/injectable那個index.js與./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：

這裏的WebPack的配置文件：

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：

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