Webpack normalModuleReplacmentPlugin 在 Windows 上无法正常工作

Question

我开始编写库以从 typescript 中的 api 中获取一些数据，并使用 webpack 作为捆绑器。我们有开发、测试和生产 api，因此库应该为每个环境使用不同的 url。 Webpack 内置了 normalModuleReplacmentPlugin，用于根据配置替换文件。我创建了不同的环境文件，应该用webpack代替。

我使用的是 Ubuntu 18.04，但我们的一位开发人员目前正在使用 windows 开发库。他注意到替代品无法在他的本地机器上运行。

webpack.config.js（来自我的 github 存储库的示例）

const merge = require( 'webpack-merge' );
const path = require( 'path' );

const commonConfigObj = {
    entry: {
        'fooBar': './src/index.ts'
    },
    output: {
        filename: '[name].js',
        path: path.resolve( __dirname, 'dist' ),
        library: 'FooBar',
        libraryTarget: 'umd'
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: [
                    {
                        loader: 'ts-loader',
                        options: { configFile: 'tsconfig.json' }
                    }
                ]
            }
        ]
    },
    resolve: {
        extensions: [ '.ts', '.tsx', '.js' ]
    },
    profile: true
};

const commonConfig = merge( [ commonConfigObj ] );
const environments = {
    'prod': require( './webpack/prod.config.js' ),
    'dev': require( './webpack/dev.config.js' )
};

module.exports = mode=>{
    if( mode ) {
        const envConfig = environments[ mode.env ];

        if( envConfig ) {
            return merge( commonConfig, envConfig );
        }
    }

    return merge( commonConfig, environments.dev );
};

webpack/prod.config.js（来自我的 github 存储库的示例）

const CleanWebpackPlugin = require( 'clean-webpack-plugin' );
const BundleAnalyzerPlugin = require( 'webpack-bundle-analyzer' ).BundleAnalyzerPlugin;
const webpack = require('webpack');

module.exports = {
    mode: 'production',
    plugins: [
        new CleanWebpackPlugin(),
        new BundleAnalyzerPlugin( {
            analyzerMode: 'disabled',
            generateStatsFile: true
        } ),
        new webpack.NormalModuleReplacementPlugin(
            /src\/environments\/environment.ts/,
            './environment.prod.ts'
        ),
    ],
    devtool: 'source-map'
};

我确定这不是 webpack 的问题，而是错误的用法。

GitHub 回购：https://github.com/ManticSic/normalModuleReplacmentPlugin-issue-windows
运行 npm ci 和 npm run build（或 npm run build-dev 对于开发环境）。
您可以在第 1 行的末尾找到重要部分

预计：...,t.environment={bar:"Prod"}...
结果 windows：...,t.environment={bar:"Normal"}...

Answer 1

不出所料，问题出在电脑前...
使用了错误的文件系统分隔符。

将 \/ 替换为 [\\/] 效果很好！
完整的正则表达式：/src[\\/]environments[\\/]environment.ts/

Webpack normalModuleReplacmentPlugin 在 Windows 上无法正常工作

Webpack normalModuleReplacmentPlugin not working correctly on Windows

windows

npm

typescript

webpack

npm-scripts