webpack - 字符串替换加载器不适用于 webpack 3

Question

我正在使用webpack 3& 尝试使用string replace loader。

此代码用于 webpack1.X

module: {
    loaders: [
      {
        test: /fileName\.js$/,
        loader: 'string-replace',
        query: {
          search: 'jQuery',
          replace: 'window.$'
        }
      }
    ]
  }

我也试过这个：

module: {
        loaders: [
          {
            test: /fileName\.js$/,
            loader: 'string-replace-loader',
            query: {
              search: 'jQuery',
              replace: 'window.$'
            }
          }
        ]
      }

我需要做些什么来确保这个加载器在 webpack 3 中工作。没有错误，但目标文件中的字符串没有被替换。

Answer 1

您是否尝试添加flags: 'g'到查询选项：

query: {
    search: 'jQuery',
    replace: 'window.$'
    flags: 'g'
}

Answer 2

在 Webpack 3 和 Webpack 4 中，您可以使用string-replace-webpack-plugin在编译时按模式执行字符串替换。

对于 Webpack 3，将以下代码添加到您的webpack.config.js:

var StringReplacePlugin = require("string-replace-webpack-plugin");
module.exports = {
   module: {
      loaders: [
         // configure replacements for file patterns
         { 
            test: /fileName\.js$/,
            loader: StringReplacePlugin.replace({
                replacements: [
                    {
                        pattern: /jQuery/g,
                        replacement: function (_match, _p1, _offset, _string) {
                            return "window.$";
                        }
                    }
                ]})
            }
      ]
   },
   plugins: [
      // an instance of the plugin must be present
      new StringReplacePlugin()
   ]
}

对于 Webpack 4，语法如下：

var StringReplacePlugin = require("string-replace-webpack-plugin");
module.exports = {
   module: {
      rules: [{ 
         test: /fileName\.js$/,
         use: [{
            loader: StringReplacePlugin.replace({
               replacements: [{
                  pattern: /jQuery/g,
                  replacement: function (_match, _p1, _offset, _string) { return "window.$"; }
                  }]
            })
         }]
      }]
   },
   plugins: [
      new StringReplacePlugin()
   ]
}

Answer 3

WebPack 2 更改了必须将配置传递给加载程序的方式。所以你可以试试（我没有测试过这个）：

module: {
  rules: [{
    test: /fileName\.js$/,
    use: {
      loader: 'string-replace',
      options: {
        query: {
          search: 'jQuery',
          replace: 'window.$'
        }
      }
    }
  }]
}

或者您可以尝试这个字符串替换加载器，因为它似乎是为 WebPack 2 编写的。 https://github.com/dmitrySheshko/replace-string-loader

或者您可以自己编写： https ://webpack.js.org/contribute/writing-a-loader/

字符串替换加载器.js

const { getOptions } = require('loader-utils');

module.exports = function(source) {
  const options = getOptions(this);
  return source.replace(options.replace, options.with);
};

webpack.config.js

module: {
  rules: [{
    test: /fileName\.js$/,
    use: {
      loader: resolve(__dirname, './string-replace-loader.js'),
      options: {
        replace: /jQuery/gi,
        with: 'window.$'
      }
    }
  }]
}

Answer 4

模式替换加载器中的错误。它使用 String.proototype.replace() 方法，它只替换模式的第一个条目。

使用标志：'g' 强制它使用 RegEx 并替换文件中的所有条目。见：https ://www.w3schools.com/jsref/jsref_replace.asp