使用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捆绑时将节点模块中的一个文件名替换为另一个文件名？

更新:

这是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')
  ),
],