Ersetzen/Alias ​​eine Datei mit Webpack

Question

Ich versuche, ein sehr neues Modul von Drittanbietern in meinem Projekt zu verwenden, die ich unter Verwendung npm installiert habe. Das Modul wurde offensichtlich auf einem Betriebssystem mit einem Dateisystem ohne Unterscheidung von Groß- und Kleinschreibung entwickelt, so dass eine Datei injectable.js erforderlich ist, während der tatsächliche Dateiname Injectable.js ist. Dies bricht den Bündelungsprozess.

Die Entwickler des Moduls kennen dieses Problem. In der Zwischenzeit versuche ich herauszufinden, wie man das Modul so benutzt, wie es ist. Ich verwende Webpack, um mein Projekt zu bündeln.

Die Baumstruktur des betreffenden Teils meines Projektes ist es etwa so aus:

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

Die index.js Datei im node_modules/the module in question/dist Ordner erfordert die Datei Injectable.js vom Anbieter Ordner, tut dies aber mit dem Befehl require('./decorators/providers/injectable');

Ich möchte alias ./decorators/providers/injectable in dieser index.js mit ./decorators/providers/Injectable. Hier

ist, was ich in meiner webpack.js Datei tue:

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

Aber dies immer noch nicht funktioniert; Ich erhalte den Fehler Module not found: Error: Cannot resolve 'file' or 'directory' ./decorators/providers/injectable

Könnten Sie bitte vorschlagen, wie man einen Dateinamen in einem Knotenmodul mit einem anderen während der Bündelung mit Webpack ersetzt?

UPDATE:

Hier webpack config file:

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

Verwendung webpack.NormalModuleReplacementPlugin:

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