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

Posted 2023-02-22

【中文标题】字符串替换加载器不适用于 webpack 3

【英文标题】：string replace loader not working with webpack 3

【发布时间】：2018-01-28 16:11:12

【问题描述】：

我正在使用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.. 你需要的是实现#2

@harshes53：ProviderPlugin 不用于此目的。

这就是您要替换的内容，无论如何，请尝试使用 regex-replace-loader。

@harshes53:providerPlugin 创建可在整个应用程序中使用的全局变量。

在查询对象中再添加一个 prop flags: 'g'..

【参考方案1】：

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

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

【参考方案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()
   ]

【讨论】：

在找到这个解决方案之前，我浪费了将近 1 小时试图弄清楚为什么 string-replace-loader 在我的终端上没有使用 RegExp。webpack 是一场噩梦

【参考方案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.$'
      
    
  ]

【参考方案4】：

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

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