Question

我开始编写库以从打字稿中的api获取一些数据，并将webpack用作捆绑程序。我们有一个dev，test和prod api，因此lib应该为每个环境使用不同的url。 Webpack内置了normalModuleReplacmentPlugin，用于替换文件，具体取决于配置。我创建了不同的环境文件，应将其替换为webpack。

我正在使用Ubuntu 18.04，但是我们的一名开发人员目前正在使用Windows来处理lib。他注意到替换项在他的本地计算机上不起作用。

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上无法正常工作

1 个答案: