用于在编译前后修改文件的 Webpack 插件

Question

我正在尝试构建一个 webpack 插件来做一件简单的事情，在 webpack 编译所有内容之前替换文件中的字符串，并在编译后放回该字符串。

配置看起来像这样:

{
   files: ['myFile.js'],
   replace: 'myString'
}

基本上我不希望 webpack 看到 myString，所以我用一些唯一的字符串替换它，然后在 webpack 编译所有内容后将 myString 放回去。 this answer 中命名的插件/加载器不适合我的用例。

我认为不需要加载器，因为我知道必须更改哪些文件，所以我不需要分析每个文件。

我已经阅读了关于插件的文档，但我仍然有点迷茫，可能是在做一个非常低效的插件。也许有插件经验的人可以指导我。

Answer 1

我没看到 string-replace-webpack-plugin在链接的答案中。我们使用它来替换需要根据它们部署到的环境进行更改的字符串。您可以使用 test 键来限制包含您要更改的字符串的文件名。

他们自述文件中的示例:

loaders: [
     // configure replacements for file patterns 
     { 
        test: /index.html$/,
        loader: StringReplacePlugin.replace({
            replacements: [
                {
                    pattern: /<!-- @secret (\w*?) -->/ig,
                    replacement: function (match, p1, offset, string) {
                        return secrets.web[p1];
                    }
                }
            ]})
        }
]

我们做一些简单的事情，比如:

{
    pattern: /_GOOGLE_ID_//ig,
    replacement: function (match, p1, offset, string) {
        return 'my-actual-google-id-for-this-env';
    }
}