Source.Replace can't replace all

[JerryWu1234]

code

class MyDependency extends Dependency {
  // Use the constructor to save any information you need for later
  constructor(module) {
    super();
    this.module = module;
  }
}

MyDependency.Template = class MyDependencyTemplate {
  apply(dep, source) {
    // dep is the MyDependency instance, so the module is dep.module
    source.replace(0, source.source().length - 1, source.source() )
  }
};

module.exports = class MyPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('MyPluginName', compilation => {
      compilation.dependencyTemplates.set(
        MyDependency,
        new MyDependency.Template()
      );
      compilation.hooks.buildModule.tap('MyPluginName', module => {
        module.addDependency(new MyDependency(module));
      });
    });
  }
};

i want to replace "source" through babel， but I only use the replace to replace all will report an error. I feel that this should be Sourcemap.

[alexander-akait]

What is the error?

[alexander-akait]

You don't use webpack-sources in your code

[JerryWu1234]

You don't use webpack-sources in your code

this my. all of code

const Dependency = require('webpack/lib/Dependency');
const generator_1 = require("@babel/generator").default;
const parser_1 = require("@babel/parser");
const traverse_1 = require("@babel/traverse").default;
class MyDependency extends Dependency {
  // Use the constructor to save any information you need for later
  constructor(module) {
    super();
    this.module = module;
  }
}

MyDependency.Template = class MyDependencyTemplate {
  apply(dep, source) {

    let v = source._source._value.slice()
    const ast = parser_1.parse(v, {
      sourceType: 'module',
    })

    traverse_1(ast, {
      ObjectProperty(path, state) {
        let [p, s] = [path, state]
        let v = p.get('value').node
        if (v.type === 'StringLiteral' && v.value.indexOf('Welcome')) {
          // let m = t.stringLiteral('23434s')
          // p.get('value').node.value = '232323'
        }
      }
    })
    const m = generator_1(ast).code
    source._source._value = m
  }
};

module.exports = class MyPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('MyPluginName', compilation => {
      compilation.dependencyTemplates.set(
        MyDependency,
        new MyDependency.Template()
      );
      compilation.hooks.buildModule.tap('MyPluginName', module => {
        module.addDependency(new MyDependency(module));
      });
    });
  }
};

this is error in my vscode

in ./src/components/HelloWorld.vue?vue&type=style&index=0&id=3aaa4256&scoped=true&lang=css&

Syntax Error: /Users/wuls/Desktop/serverless/hello-world/node_modules/.pnpm/css-loader@3.6.0_webpack@4.46.0/node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!/Users/wuls/Desktop/serverless/hello-world/node_modules/.pnpm/vue-loader@15.9.8_679359cdb69c218f2f8f476b2ba08796/node_modules/vue-loader/lib/loaders/stylePostLoader.js!/Users/wuls/Desktop/serverless/hello-world/node_modules/.pnpm/postcss-loader@3.0.0/node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!/Users/wuls/Desktop/serverless/hello-world/node_modules/.pnpm/cache-loader@4.1.0_webpack@4.46.0/node_modules/cache-loader/dist/cjs.js??ref--1-0!/Users/wuls/Desktop/serverless/hello-world/node_modules/.pnpm/vue-loader@15.9.8_679359cdb69c218f2f8f476b2ba08796/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/wuls/Desktop/serverless/hello-world/src/components/HelloWorld.vue?vue&type=style&index=0&id=3aaa4256&scoped=true&lang=css&:98 exports.pushmodule.iid, "\nh3[data-v-3aaa4256] {\n margin: 40px 0 0;\n}\nul[data-v-3aaa4256] {\n list-style-type: none;\n padding: 0;\n}\nli[data-v-3aaa4256] {\n display: inline-block;\n margin: 0 10px;\n}\na[data-v-3aaa4256] {\n color: #42b983;\n}\n", ""]); // Exports ^

SyntaxError: Unexpected token ']'

@ ./src/components/HelloWorld.vue?vue&type=style&index=0&id=3aaa4256&scoped=true&lang=css& 1:0-818 1:0-818 @ ./src/components/HelloWorld.vue @ ./node_modules/.pnpm/cache-loader@4.1.0_webpack@4.46.0/node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/.pnpm/thread-loader@2.1.3_webpack@4.46.0/node_modules/thread-loader/dist/cjs.js!./node_modules/.pnpm/babel-loader@8.2.3_1bd60a6cd0f7024f034efd75ae733a3f/node_modules/babel-loader/lib!./node_modules/.pnpm/cache-loader@4.1.0_webpack@4.46.0/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/.pnpm/vue-loader@15.9.8_679359cdb69c218f2f8f476b2ba08796/node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js& @ ./src/App.vue?vue&type=script&lang=js& @ ./src/App.vue @ ./src/main.js @ multi ./src/main.js

ERROR Build failed with errors.  ELIFECYCLE  Command failed with exit code 1. 终端进程“zsh '-c', 'pnpm run build'”已终止，退出代码: 1。

thank you of your patience,

[JerryWu1234]

I want replace all of source code through babel

[alexander-akait]

If you need replace code through babel you can use https://github.com/jean-smaug/babel-plugin-search-and-replace#readme

[JerryWu1234]

If you need replace code through babel you can use https://github.com/jean-smaug/babel-plugin-search-and-replace#readme

so sad because it's work in vue-cli. babel can't catch template in vue

[alexander-akait]

@wulinsheng123 I think in this case better to ask vue-cli developers, I think you need babel vue parser or something similar to do it, anyway why do you need this? Maybe I can provide other solutions to solve the problem

[JerryWu1234]

my company had two UI framwork (elementUI and Iview). i want to merge there framework in vue project my idea is to get render function in vue . then modify and replace it through babel. initially I tried using babel,but babel can't catch that render function in vue

[JerryWu1234]

i tried these methods https://stackoverflow.com/questions/35092183/webpack-plugin-how-can-i-modify-and-re-parse-a-module-after-compilation

none of these methods can be used

[alexander-akait]

What do you need replace?

[alexander-akait]

If you provide small example with code (no need provide whole project, just proof of concept) I will show how to do it

[JerryWu1234]

What do you need replace?

I need to convert the attributes, labels, and events of the element ui into iview ui

ok no problem

[JerryWu1234]

If you provide small example with code (no need provide whole project, just proof of concept) I will show how to do it

thank you very much

[JerryWu1234]

https://github.com/wulinsheng123/vue here you are

[JerryWu1234]

i want change <el-button>默认按钮</el-button> in App.vue, but because it's vue file,so babel can't catch.

[JerryWu1234]

If you provide small example with code (no need provide whole project, just proof of concept) I will show how to do it

hi guy, excuse

[alexander-akait]

Sorry, this problem is real out of scope webpack, better ask vue cli developers how to achieve it

[JerryWu1234]

Sorry, this problem is real out of scope webpack, better ask vue cli developers how to achieve it

would i ask you a question? why do i can't replace all of webpack'source, but i can replace part

[JerryWu1234]

https://github.com/wulinsheng123/vue sorry this pro can visite , before it's private . If you have time, you can help me see

[TheLarkInn]

Closed due to inactivity.