如何在Webpack链中配置string-replace-webpack-plugin

时间:2018-11-13 14:26:03

标签: webpack

vuejs中更改默认Webpack配置时遇到问题。 我想替换指定文件(src/config.js中的一些占位符 但是很难使用string-replace-webpack-plugin来应用webpack-chain,这是我修改vue-cli导出的webpack配置的唯一方法。任何帮助都会很棒。

1。配置

const StringReplacePlugin = require('string-replace-webpack-plugin')
config.module
    .rule('preReplace')
    .test(/src\/config\.js$/)
    .pre()
    .use('replace')
    .loader(StringReplacePlugin.replace)
    .options({
        replacements: [{
                pattern: /__IS_DEV__/g,
                replacement: function () {
                    return process.env.NODE_ENV === 'development'
                }
            },
            {
                pattern: /__IS_APP__/g,
                replacement: function () {
                    return process.env.IS_APP || false
                }
            },
            {
                pattern: /__API_HOST__/g,
                replacement: function () {
                    return process.env.API_HOST || ''
                }
            }
        ]
    })

config.plugin('strReplace').use(StringReplacePlugin)

2。我期望的是

{
    module: {
        rule: [
            /* config.module.rule('preReplace') */
            {
                test: /src\/config\.js$/,
                enforce: 'pre',
                use: [
                    /* config.module.rule('preReplace').use('replace') */
                    {
                        loader: StringReplacePlugin.replace({
                            replacements: [{
                                    pattern: /__IS_DEV__/g,
                                    replacement: function () {
                                        return process.env.NODE_ENV === 'development'
                                    }
                                },
                                {
                                    pattern: /__IS_APP__/g,
                                    replacement: function () {
                                        return process.env.IS_APP || false
                                    }
                                },
                                {
                                    pattern: /__API_HOST__/g,
                                    replacement: function () {
                                        return process.env.API_HOST || ''
                                    }
                                }
                            ]
                        })
                    }
                ]
            }
        ]
    },
    plugins: [
        /* config.plugin('strReplace') */
        new StringReplacePlugin()
    ]
}

3。我实际上得到了什么

{
    module: {
        rule: [
            /* config.module.rule('preReplace') */
            {
                test: /src\/config\.js$/,
                enforce: 'pre',
                use: [
                    /* config.module.rule('preReplace').use('replace') */
                    {
                        loader: function StringReplacePlugin() {},
                        options: {
                            replacements: [{
                                    pattern: /__IS_DEV__/g,
                                    replacement: function () {
                                        return process.env.NODE_ENV === 'development'
                                    }
                                },
                                {
                                    pattern: /__IS_APP__/g,
                                    replacement: function () {
                                        return process.env.IS_APP || false
                                    }
                                },
                                {
                                    pattern: /__API_HOST__/g,
                                    replacement: function () {
                                        return process.env.API_HOST || ''
                                    }
                                }
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        /* config.plugin('strReplace') */
        new StringReplacePlugin()
    ]
}

0 个答案:

没有答案