How to use string-replace-webpack-plugin - 10 common examples

const commonPlugins = [
	new StringReplacePlugin(),
	new webpack.DefinePlugin({
		"process.env.NODE_ENV": JSON.stringify(config.nodeEnv),
		"PRODUCTION": config.isProduction,

		"LANGUAGE_MAIN_FILENAME": JSON.stringify(config.language.filename),
		"LANGUAGE_FALLBACK_FILENAME": config.fallbackLanguage ? JSON.stringify(config.fallbackLanguage.filename) : null,
		"LANGUAGE_ISRTL": config.language.isRTL
	}),
	new StyleLintPlugin({
		files: ["src/**/*.vue", "src/**/*.scss"]
	})
]

const doI18n = StringReplacePlugin.replace({
	replacements: [{
		pattern: /\$ts\((.+)\)/g,
		replacement: function(fullMatch, params, offset, string) {
			params = params.split(",").map((p) => eval(p))
			if (i18n.tc(...params) === params[0]) {
				// check if the translation key is defined
				// We could have used i18n.te but it does not account for fallback languages
				// We are using this instead. Uglier but does the job
				if (config.isProduction) {
					throw new Error(`[i18n] Translation key "${params[0]}" does not exist`)
				} else { // just warn in development mode
					console.warn(`[i18n] Translation key "${params[0]}" does not exist`)
				}
			}
			return i18n.tc(...params)
		}

var path = require('path');
var webpack = require('webpack');
var StringReplacePlugin = require("string-replace-webpack-plugin");

module.exports = {
  entry: './src/app.js',
  output: { path: "./extension/", filename: 'app.js' },
  module: {
        loaders: [
            {
                test: /\.json$/,
                loader: "json"
            },
            {
                test: /\.js$/,
                loader: StringReplacePlugin.replace({
                    replacements: [{
                        // Tern uses an older version of Acorn, which embeds an invalid UTF-8 character
                        // Chrome doesn't want to load the content script because of that
                        // So we replace the character literal with a fromCharCode call
                        pattern: new RegExp("\"\uffff\""),
                        replacement: function(){
                            return "String.fromCharCode(65535)";
                        }
                    }]
                })
            }
        ]
    },
    plugins: [
        new StringReplacePlugin()
    ]

resolve: {
		alias: {
			fs: path.join(__dirname, './src/browser-extensions/virtual-fs.js')
		}
	},
	node: {
		// Prevent webpack from injecting setImmediate polyfill, which includes a "new Function" through a global polyfill - which cannot be used in a CSP environment with sane defaults
		setImmediate: false
	},
	module: {
		rules: [
			// for fs don't use babel _interopDefault command
			{
				enforce: 'pre',
				test: /pdfkit[/\\]js[/\\]/,
				loader: StringReplacePlugin.replace({
					replacements: [
						{
							pattern: "import fs from 'fs';",
							replacement: function () {
								return "var fs = require('fs');";
							}
						}
					]
				})
			},
			{
				test: /\.js$/,
				include: /(pdfkit|saslprep|unicode-trie|unicode-properties|dfa|linebreak|png-js)/,
				use: {
					loader: 'babel-loader',
					options: {

watch: true,
  entry: {
    'content-script': './src/content-script',
    render: './src/render',
    background: './src/background',
  },
  devtool: 'source-map',
  output: {
    filename: '[name].js',
    path: path.resolve('chrome/dist'),
  },
  module: {
    rules: [
      {
        test: /LabelCell\.js$/,
        use: StringReplacePlugin.replace({
          replacements: [
            {
              // This fix React inline style
              pattern: /paddingInlineStart/g,
              replacement: function(match, p1, offset, string) {
                return 'WebkitPaddingStart'
              },
            },
          ],
        }),
      },
      // Seems not work here, overwrite it in `reset.css`
      // {
      //   test: /\common.css$/,
      //   use: StringReplacePlugin.replace({
      //     replacements: [

},
  // Enable sourcemaps for debugging webpack's output.
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: 'awesome-typescript-loader',
        },
        exclude: /node_modules/,
      },
      {
        // This is an ugly hack to prevent require error
        test: /node_modules\/vscode.*\.js$/,
        use: StringReplacePlugin.replace({
          replacements: [
            {
              pattern: /factory\(require, exports\)/g,
              replacement: function(match, p1, offset, string) {
                return 'factory(null, exports)'
              },
            },
            {
              pattern: /function \(require, exports\)/,
              replacement: function(match, p1, offset, string) {
                return 'function (UnUsedVar, exports)'
              },
            },
          ],
        }),
      },

// You can add here any file extension you want to get copied to your output
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
      use: 'file-loader'
    }, {
      // HTML LOADER
      // Reference: https://github.com/webpack/raw-loader
      // Allow loading html through js
      test: /\.html$/,
      use: 'raw-loader'
    }, {
      // STRING REPLACE PLUGIN
      // reference: https://www.npmjs.com/package/string-replace-webpack-plugin
      // Allow for arbitrary strings to be replaced as part of the module build process
      // Configure replacements for file patterns
      test: /index.html$/,
      use: stringReplacePlugin.replace({
        replacements: [{
          pattern: /WEB_PORT/ig,
          replacement: function (match, p1, offset, string) {
            return webPort;
          }
        }
      ]})
    }],
  };

  /**
   * Plugins
   * Reference: http://webpack.github.io/docs/configuration.html#plugins
   * List: http://webpack.github.io/docs/list-of-plugins.html
   */
  config.plugins = [

cacheDirectory: true,
          presets: ['es2015', 'stage-0'],
          plugins: ['transform-runtime'],
        },
      },
      {
        // JSON files
        test: /\.json$/,
        exclude: /node_modules\//,
        loader: 'json'
      },
      {
        // vendors stylesheets
        test: /\.css$/,
        include: /node_modules\//,
        loader: StringReplacePlugin.replace(extractVendorCSS.extract(['css']),
        {
          replacements: [{
            pattern: /\@import url\(https\:\/\/fonts\.googleapis\.com\/[^\)]*\);/gi,
            replacement: function () { return ''; },
          }]
        }),
      },
      {
        // project stylesheets
        test: /\.css$/,
        exclude: /node_modules\//,
        loader: extractProjectCSS.extract(['css', 'postcss']),
      },
      {
        // project stylus stylesheets
        test: /\.styl$/,

init() {
    switch (this.env) {
      case BaseBuilder.DEV:
        break;
      case BaseBuilder.TEST:
        break;
      case BaseBuilder.PROD:
        break;
      default:
        break;
    }
    const baseDir = this.config.baseDir;
    this.setLoader({
      test: /layout\/standard\/index\.js$/,
      loader: StringReplacePlugin.replace({
        replacements: [
          {
            pattern: /["|'](.*\.html)\?inline["|']/gi,
            replacement(match, p1, offset, string) {
              const filePath = path.join(baseDir, p1);
              const content = fs.readFileSync(filePath, 'utf8').replace(/'/g, '"');
              return `\`${content}\``;
            }
          }
        ]
      })
    });
    this.setPlugin(new StringReplacePlugin());
  }
}

var StringReplacePlugin = require('string-replace-webpack-plugin');

module.exports = {
  loader: StringReplacePlugin.replace({
    replacements: [
      {
        pattern: //ig,
        replacement: function() {
          var packageJSON = require('../package');
          return packageJSON.version;
        }
      }
    ]
  })
}

function rewireStringReplace(config, env) {
  const version = env === 'production' ? manifestJson.version : '0.0.0'

  signale.info(`[INFO] octodirect version : ${version}`)

  config.module.rules.push({
    test: /(\.tsx)$/,
    loader: StringReplacePlugin.replace({
      replacements: [
        {
          pattern: /#__VERSION__#/gi,
          replacement: function(match, p1, offset, string) {
            return version
          },
        },
      ],
    }),
  })
  config.plugins.push(new StringReplacePlugin())

  return config
}