string replace loader not working with webpack 3

Question

I am using webpack 3 & trying to use string replace loader.

This code use to work in webpack1.X

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

I have tried this as well:

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

What do I need to do to ensure this loader works in webpack 3. There are no errors but string is not getting replaced in the target file.

take a look at this answer.. what you need is to implement #2 — harshes53
– harshes53, Commented Aug 20, 2017 at 16:41
That is what you are trying to replace, whatever, give a try with regex-replace-loader. — harshes53
– harshes53, Commented Aug 21, 2017 at 13:59
@harshes53:providerPlugin creates global variables which are available across the application. — OpenStack
– OpenStack, Commented Aug 21, 2017 at 14:02

harshes53 · Accepted Answer · 2017-08-21 14:09:56Z

3

Have you tried adding flags: 'g' to the query option:

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

answered Aug 21, 2017 at 14:09

harshes53

4291 gold badge7 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex Walker · Accepted Answer · 2019-01-18 12:13:35Z

2

In Webpack 3 and Webpack 4 you can use the string-replace-webpack-plugin to perform string replacement by pattern at compile time.

For Webpack 3, add the following code to your 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()
   ]
}

For Webpack 4, the syntax is as follows:

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()
   ]
}

answered Jan 18, 2019 at 12:13

Alex Walker

2,3562 gold badges21 silver badges33 bronze badges

1 Comment

alfredopacino Over a year ago

I wasted almost 1h trying to figure it out why string-replace-loader didn't work with RegExp on my end before finding this solution..webpack is a nightmare

Michael · Accepted Answer · 2017-11-29 05:19:29Z

WebPack 2 changed how configuration must be passed to a loader. So you can try (I've not tested this):

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

Or you can try this string replace loader as it seems to be have been written for WebPack 2. https://github.com/dmitrySheshko/replace-string-loader

Or you can write your own: https://webpack.js.org/contribute/writing-a-loader/

string-replace-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.$'
      }
    }
  }]
}

Sergey Dubinets · Accepted Answer · 2021-10-29 18:15:24Z

0

Bug in pattern-replace-loader. It uses String.proototype.replace() method and it only replaces first entry of the pattern.

Use of flags: 'g' forces it to use RegEx and replace all entries in the file. See: https://www.w3schools.com/jsref/jsref_replace.asp

answered Oct 29, 2021 at 18:15

Sergey Dubinets

1

Collectives™ on Stack Overflow

string replace loader not working with webpack 3

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related