Webpack normalModuleReplacementPlugin 在 Windows 上无法正常工作答案

【问题标题】：Webpack normalModuleReplacmentPlugin not working correctly on WindowsWebpack normalModuleReplacementPlugin 在 Windows 上无法正常工作
【发布时间】：2019-09-01 19:18:09
【问题描述】：

我开始编写库以从 typescript 中的 api 获取一些数据并将 webpack 用作捆绑器。我们有一个 dev、test 和 prod api，所以 lib 应该为每个环境使用不同的 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"}...

【问题讨论】：

标签： windows typescript npm webpack npm-scripts

【解决方案1】：

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

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

【讨论】：